javascript - 将值传递给 Bootstrap Modal JavaScript 和 PHP

Question

我试图在这里找到这个，但没有找到我想要的东西。

目标:流程完成后，显示一个 Bootstrap 模式，通知用户它已完成(和/或管理员可能需要授权某些内容，例如，可能需要授权评论...... )。

我可以输出一个 JavaScript 脚本(当我输入时听起来很多余)来打开模式，但我想将文本传递到模式，这样我就可以有一个可重用的对话框。这是我正在使用的基本代码:

模态形式:

<!-- 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">&times;</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 -->

打开表单的 JavaScript:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// 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('');
      });</code></pre>
</div>
</div>

输出实际打开它的脚本的PHP:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>  echo '<script>';
  // how do I pass the variables???
  echo '$("#myAlert").modal("show")';
  echo '</script>';</code></pre>
</div>
</div>

我希望能够将标题和描述值传递给表单，但无法弄清楚。我有一个版本，可以使用一个很大程度上基于 Bootstrap 站点的按钮，但我无法弄清楚这个版本。提前致谢!

Answer 1

可能有更好的解决方案，但这个也有效，因为我已经测试过了。需要执行3步:

1. 您需要在所有事件和函数之上声明要传递给 JavaScript 的变量(使它们成为全局变量)。

例如:

var global_caption = "Some default caption";
var global_description = "Some default description";

// All scripts now go here

在模态中，您可以为某些事件从全局变量分配局部变量(或直接使用全局变量)，例如:

这将显示与您到目前为止的情况基本相同的内容:

$('#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，您可以为全局变量分配新值并再次调用事件。

声明可以如此简单:

echo '<script>';
echo 'global_caption = "This is a new caption"';
echo 'global_description = "This is a new description"';
echo '$("#myAlert").modal("show")';
echo '</script>';