Bootstrap模态对话框：动态载入内容

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

Bootstrap模态对话框：动态载入内容

Bootstrap官方文档给出了一个模态对话框的例子：

这是一个静态案例，写在页面上可以通过href或者js调用显示。

现在，当前页面上可能有多个模态对话框。如果使用静态的方式，那么有多少模

态对话框就要重写上面的代码多少遍。一个页面中填满了类似的代码，非常不友好。

于是希望，页面上只保留一个

用于容器，每个模态对话框的具体内容抽出

来，单独写到一个页面中。当需要显示哪个模态对话框时，只需要将该模态对话框对应页面的内容载入到

容器中即可。

Bootstrap的modal本身就提供了这种能力。

Bootstrap主要分两部分：

①最外层

，含modal与fade类。

②内层的内容，有3个

，分别含modal-header，modal-body和modal-f

ooter类。

有的模态对话框如下：

这样的模态对话框有四个部分：

①最外层

，含modal与fade类。

②第二层

，含modal-dialog类。

③第三层

，含modal-content类。

④第四层内容，有3个

，分别含modal-header，modal-body和modal-f

ooter类。

实际上，起主要作用的是最外层

，modal类是必须的。modal-dialog，m odal-content以及内层的3个

的类主要是用于样式，因此是可以缺少和修改的。不过，建议维持原格式。

Bootstrap的modal.options.remote属性可以指定一个渲染页面，或者一个请求，只要这个请求最终也是返回一个渲染页面即可。

当用js来启动modal时，就会获取到指定的渲染页面，并填充到modal-body部分的内容里。

这种方法有个问题，那就是模态对话框的渲染页面只会初始化一次，直到再次刷新页面为止。目前普遍的一个解决方法是在隐藏模态窗的时候去除数据：

$("#myModal").on("hidden", function() {

$(this).removeData("modal");

});

但该方法在某些情况下并不好用。

而实际上，除了上述方法外，还可以调用jQuery的load()函数来为

加载渲染页面。直接调用jQuery的load()会将指定的

所有的子内容全部清除，替换为渲染页面。

使用jQuery的load()，同样需要在隐藏模态窗的时候去除数据，但不会出现失灵的情况。

以下为Bootstrap中Modal的源码：

var Modal = function (element, options) {

this.options = options

this.$element = $(element)

.delegate('[data-dismiss="modal"]', 'click.dismiss.modal ', $.proxy(this.hide, this))

this.options.remote && this.$element.find('.modal-body').l oad(this.options.remote)

}

可以看到最后一行，当this.options.remote存在时，会调用this.$elem ent.find('.modal-body').load(this.options.remote)，也就是说会找到

含modal-body类的

，对该

调用jQuery的load()，来将remote所指向的渲染页面加载到该

中。

现在使用jQuery的load()方式。

要创建一个动态加载的模态对话框，可以使用如下方式：

1.在主页面中，：

其中showModal()函数可以由按钮等控件进行调用。

2.在模态对话框页面中只填写内容部分：

这样，当调用主页面的showModal()函数时，就会请求模态对话框页面(即2中的内容)。该模态对话框页面会以jQuery.load()的方式加载到$("#myModal")中，也就显示出了模态对话框。

注意要将页面加载给哪个

，就由哪个

调用jQuery.load()。这个

不一定是最外层的

。

Bootstrap模态对话框：动态载入内容

模态框header

模态框header