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

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

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

模态框header

模态框body

模态框footer

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

现在，当前页面上可能有多个模态对话框。如果使用静态的方式，那么有多少模于是希望，页面上只保留一个用于容器，每个模态对话框的具体内容抽出

态对话框就要重写上面的代码多少遍。一个页面中填满了类似的代码，非常不友好。 来，单独写到一个页面中。当需要显示哪个模态对话框时，只需要将该模态对话框对应页面的内容载入到容器中即可。 Bootstrap的modal本身就提供了这种能力。

Bootstrap主要分两部分：

① 最外层，含modal与fade类。

② 内层的内容，有3个，分别含modal-header，modal-body和modal-f

ooter类。

有的模态对话框如下：

模态框header

模态框body

模态框footer

这样的模态对话框有四个部分： ① 最外层，含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部分的内容里。

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

$(\).on(\, function() { $(this).removeData(\); });

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

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

染页面。直接调用jQuery的load()会将指定的所有的子内容全部清除，替换为渲染页面。

使用jQuery的load()，同样需要在隐藏模态窗的时候去除数据，但不会出现失灵的情况。 以下为Bootstrap中Modal的源码：

var Modal = function (element, options) { this.options = options

this.$element = $(element)

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

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

含modal-body类的，对该调用jQuery的load()，来将remote所指向的渲染页面加载到该中。

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

要创建一个动态加载的模态对话框，可以使用如下方式： 1. 在主页面中，：

其中showModal()函数可以由按钮等控件进行调用。 2. 在模态对话框页面中只填写内容部分：

模态框header

模态框body

模态框footer

这样，当调用主页面的showModal()函数时，就会请求模态对话框页面(即2中的

内容)。该模态对话框页面会以jQuery.load()的方式加载到$(\)中，也就显示出了模态对话框。 注意要将页面加载给哪个，就由哪个调用jQuery.load()。这个不一定是最外层的。

但调用jQuery. modal('show')的一定是最外层的。

可以与下面的代码进行对比： 1. 在主页面中，：

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

模态框header

模态框body

模态框footer

本文来源：https://www.bwwdw.com/article/lkzd.html