魏长东

weichangdong

bootstrap ajax弹窗

直接调用模态对话框

<div id="myModal" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h3>对话框标题</h3>
    </div>
    <div class="modal-body">
        <p>对话框主体</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">取消</a>
        <a href="#" class="btn btn-primary" data-dismiss="modal">确定</a>
    </div>
</div>

<button type="button" data-toggle="modal" data-target="#myModal">打开对话框</button>
<a href="#myModal" role="button" class="btn" data-toggle="modal">打开对话框</button>

 

使用 remote 选项让模态对话框加载页面到 .modal-body 中

<a href="page.php" data-toggle="modal" data-target="#myModal">打开对话框</a>
或者

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

这两种方法的背后,都是 Bootstrap 调用了 jQuery 的 load() 方法,从服务器端加载了 page.php 页面。但这个加载只会发生一次,后面不管你点击几次链接,或者执行几次脚本,哪怕改变传递

 

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

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