bootstrap模態框遠程加載網頁的正確處理方式
阿新 • • 發佈:2017-08-12
clas 處理 加載網頁 logs def lose 刷新 客戶端 粘貼
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">×</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"); }); })
bootstrap模態框遠程加載網頁的正確處理方式