Question

如何将jquery dialog修改为bootstrap的弹出框

Answer 1

使用jquery更改bootstrap弹出框的内容，可以使用Jquery的load()方法，动态加载不同的模态框（弹出框）内容，然后填充到页面的弹出框div中：

主页面只保留弹出框最外面的那个div

1
<div class="modal fade" id="myModal"> </div>
动态加载的弹出框内容页面中包括bootstrap模态框中的head、body和footer部分
1
2
3
4
5
6
7
8
9
<div class="modal-header">
<h3>模态框header </h3>
</div>
<div class="modal-body">
<p>模态框body</p>
</div>
<div class="modal-footer">
<p>模态框footer</p>
</div>
利用jquery的load()方法，在点击不同的按钮时动态先动态加载内容到模态框的div中，然后再让bootstrap显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
// 模态对话框隐藏时移除数据
$("#myModal").on("hidden", function() {
$(this).removeData("modal");
});
// 显示模态对话框
var showModal = function() {
var remote = "/test/showModal";
if (remote != "") {
$("#myModal").load(remote, function() {
$("#myModal").modal('show');
});
}};
</script>
其中showModal函数可以由按钮控制。