Bootstrap模态对话框动态载入内容.docx 免费阅读可下载

2、模态对话框就要重写上面的代码多少遍。一个页面中填满了类似的代码，非常不友好。于是希望，页面上只保留一个

，含modal与fade类。②第二

4、层

，含modal-dialog类。③第三层

，含modal-content类。④第四层内容，有3个

，分别含modal-header，modal-body和modal-footer类。实际上，起主要作用的是最外层

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

的类主要是用于样式，因此是可以缺少和修改的。不过，建议维持原格式。Bootstrap的modal.options.remote属性可以指定一个渲染页面，或者一个请求，只要这个请求最终也是返回一个渲染页面即可。当用

5、js来启动modal时，就会获取到指定的渲染页面，并填充到modal-body部分的内容里。这种方法有个问题，那就是模态对话框的渲染页面只会初始化一次，直到再次刷新页面为止。目前普遍的一个解决方法是在隐藏模态窗的时候去除数据：$("#myModal").on("hidden",function(){$(this).removeData("modal");});但该方法在某些情况下并不好用。而实际上，除了上述方法外，还可以调用jQuery的load()函数来为

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

所有的子内容全部清除

6、，替换为渲染页面。使用jQuery的load()，同样需要在隐藏模态窗的时候去除数据，但不会出现失灵的情况。以下为Bootstrap中Modal的源码：varModal=function(element,options){this.options=optionsthis.$element=$(element).delegate('[data-dismiss="modal"]','click.dismiss.modal',$.proxy(this.hide,this))this.options.remote&&this.$element.find('.mo

7、dal-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.在主页面中，：

8、ade"id="myModal">

模态框header

模态框header

Bootstrap模态对话框动态载入内容.docx

Bootstrap模态对话框动态载入内容.docx

模态框header

模态框header