Bootstrap Modal 中的动态内容答案

【问题标题】：Dynamic content in Bootstrap ModalBootstrap Modal 中的动态内容
【发布时间】：2015-07-14 19:19:41
【问题描述】：

我对 Bootstrap 模式没有什么问题。我在 PHP 中嵌入了 HTML 代码。由于某些原因，我希望页面中有几个模式。

<?php
   //Looping modals...
    for($i = 0; $i < 5; $i++){
        echo '<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">';
          echo 'Launch demo modal';
        echo '</button>';
        echo '<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">';
          echo '<div class="modal-dialog" role="document">';
            echo '<div class="modal-content">';
              echo '<div class="modal-header">';
                echo '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
                echo '<h4 class="modal-title" id="myModalLabel">';
                    echo $i; //Title goes here.
                echo '</h4>';
              echo '</div>';
              echo '<div class="modal-body">';
                echo '...'; //Content goes here.
             echo ' </div>';
              echo '<div class="modal-footer">';
                echo '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';
                echo '<button type="button" class="btn btn-primary">Save changes</button>';
              echo '</div>';
            echo '</div>';
          echo '</div>';
        echo '</div>';
    }
?>

循环工作正常，但我无法更新我的模态标题和内容。所有内容和标题数据保持不变。我试过这个：

   $(document).ready(function(){
        $('#myModal').on('hidden.bs.modal', function () {
        $(this).removeData('bs.modal');
    });
});

嗯...我不确定如何正确使用它。我的意思是我不知道如何在 PHP 代码中使用 jQuery。我尝试将 jQuery 代码保存在 script.js 文件中并包含在我的模式中：

echo '<script type = "text/javascript">';
    include ('script.js');
echo '</script>';

无论如何，这不起作用。
那么，如何动态改变模态内容呢？

【问题讨论】：

“所有内容和标题数据都保持不变。” 你能举一个这个错误输出的例子吗？更好的是，向我们展示它应该是什么样的？

标签： javascript php jquery html twitter-bootstrap

【解决方案1】：

您需要在每次循环时更改模态 ID - 例如，在模态 ID 中添加 $i var。您必须在 HTML 中具有唯一 ID，否则 jQuery / Bootstrap 模态将找不到正确的模态。

改变

echo '<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal'.$i.'">';

和

echo '<div class="modal fade" id="myModal'.$i.'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">';

或者，您也可以试试varying modal content based on a trigger button。

另外 - 只是一个样式说明：您可以使用多行 echo 语句，这可能会使您的代码更易于阅读。或者关闭 PHP 标记并在使用 HTML 完成后重新打开：

echo '
<div ... >
    <div ... >
    </div>
</div>
';

或（而不是回声）：

<?php
for ($i ... ) {
    ?>
    <div ... >
        <div ... >
        </div>
    </div>
    <?php
} //ending for loop 
?>

【讨论】：