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。我尝试在script.js文件中保存jQuery代码，并包含在我的模态中：

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。

另外 - 只是样式注释：您可以使用多行回显语句，这可能会使您的代码更容易阅读。或者关闭PHP tage并在完成HTML时重新打开：

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

或（而不是回声）：

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

Bootstrap Modal中的动态内容

1 个答案: