bootstrap模態框遠程加載網頁的正確處理方式

bootstrap模態框遠程加載網頁的方法

在bootsrap模態框文檔裏給出了這個方法：

使用連接模式

<a data-toggle="modal" href="tieniu.php" data-target="#modal">Click me</a>

使用腳本模式：

$("#modal").modal({
    remote: "tieniu.php"
});

 

沒有給出任何實例，這種用法還有一些細節沒有說明。你若是僅僅這樣複製使用，那是沒有效果的。

不少朋友都在網上問題這個問題，大多數人都在複製粘貼，本身都沒有驗證，就亂回覆，唉！

下面是正確的模態框遠程加載方法的代碼

客戶端代碼

<a data-toggle="modal" href="tieniu.php" data-target="#modal">Click me</a>
<div class="modal" id="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                  <!--這裏是遠程加載過過來的內容區-->  
         </div>
        </div>
 </div>
    

服務端代碼，服務端的代碼須要包含一部分模態框的框體文本，請注意

<?php $rnd=rand(1000,9999);?>
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
     <h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
    <?php echo $rnd;?>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
</div>

關閉模態框，再次調用遠程頁面，可是內容不刷新

如下是解決方式

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