javascript - Bootstrap Modal 中的动态内容

Question

我对 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>';

无论如何，这是行不通的。
那么，如何动态改变模态内容呢？

Answer 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 
?>