[英]Pass Values to Bootstrap Modal JavaScript and PHP
I have tried to find this out here and not found what I was looking for.我试图在这里找到这个,但没有找到我要找的东西。
The Goal: After a process has completed, to display a Bootstrap Modal that notifies the user it is complete (and/or that the admin may need to authorize something, for example, a comment may need to be authorized ...).目标:在流程完成后,显示一个 Bootstrap Modal,通知用户它已完成(和/或管理员可能需要授权某些东西,例如,评论可能需要授权......)。
I can output a JavaScript script (sounds redundant as I type that) that will open the modal, but I want to pass text to the modal so I can have a reusable dialog.我可以输出一个将打开模态的 JavaScript 脚本(在我键入时听起来多余),但我想将文本传递给模态,以便我可以有一个可重用的对话框。 Here's the basic code I am working with:这是我正在使用的基本代码:
The modal form:模态形式:
<!-- language: lang-html -->
<!-- meant to be an alert dialog -->
<div id="myAlert" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title" id="descModalLabel"></h3>
</div> <!-- / modal-header -->
<div class="modal-body">
<!-- some text will be inserted here -->
</div><!-- / modal-body -->
<div class="modal-footer" -->
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div><!-- / modal-footer -->
</div><!-- / modal-content -->
</div><!-- /modal-dialog -->
</div> <!--/ modal -->
<!-- end of modal form -->
<!-- end snippet -->
The JavaScript to open the form:用于打开表单的 JavaScript:
// for the myAlert modal:
// code to open the modal with the caption and description:
$('#myAlert').on('show.bs.modal', function (event)
{
var modal = $(this);
// need to get these values passed somehow
var caption = "Test";
var description = "Test Test Test";
modal.find('.modal-title').text( caption );
modal.find('.modal-body').append( '<strong>Description:</strong> ' + description );
});
// when modal closes, clear out the body:
$('#myAlert').on('hidden.bs.modal', function ()
{
$(this).find(".modal-body").text('');
});
The PHP that outputs the script that actually opens it:输出实际打开它的脚本的 PHP:
echo '<script>';
// how do I pass the variables???
echo '$("#myAlert").modal("show")';
echo '</script>';
I would like to be able to pass the caption and description values to the form, but cannot figure it out.我希望能够将标题和描述值传递给表单,但无法弄清楚。 I have a version that works with a button based heavily on the Bootstrap site, but I cannot figure this one out.我有一个版本可以使用基于 Bootstrap 站点的按钮,但我无法弄清楚这个。 Thanks in advance!提前致谢!
There are probably better solutions out there but this one works too as I have tested already.那里可能有更好的解决方案,但正如我已经测试过的那样,这个解决方案也有效。 It requires to take 3 steps:它需要采取 3 个步骤:
For example:例如:
var global_caption = "Some default caption";
var global_description = "Some default description";
// All scripts now go here
This will show basically the same thing as in your case so far:到目前为止,这将显示与您的情况基本相同的内容:
$('#myAlert').on('show.bs.modal', function (event)
{
var modal = $(this);
var caption = global_caption;
var description = global_description;
modal.find('.modal-title').text( caption );
modal.find('.modal-body').append( '<strong>Description:</strong> ' + description );
});
echo
you assign new values to global variables and summon the event again.使用echo
您可以为全局变量分配新值并再次调用该事件。Declaration can go as simply as:声明可以简单地如下:
echo '<script>';
echo 'global_caption = "This is a new caption"';
echo 'global_description = "This is a new description"';
echo '$("#myAlert").modal("show")';
echo '</script>';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.