<style type="text/css">
<!--
p
{text-indent:2em}
-->
</style>
Bootstrap不用多说了。Bootstrap自带有模态对话框插件,使用起来很方便,只需按照如下格式定义html,然后用js触发,或者用指定data属性的普通html元素来触发,后者的示例如下:
<div id="myModal" class="modal hide fade" data-backdrop="static">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3>对话框标题</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">关闭</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
其中定义了data-dismiss="modal"属性的按钮用于关闭该模态对话框,笔者姑且称其为“关闭”按钮。一般情况下,这样的默认设置没有任何问题。笔者在项目中遇到的问题是:笔者设计的"modal-body"里面的内容是一个模板,动态调用不同的子页面内容;当子页面中包含另一个子模态对话框的定义时,问题就出现了。子模态对话框弹出之后,点击其“关闭”按钮,会顺带着把父模态对话框给关闭掉。要解决这样的问题,或者说是Bootstrap的一个bug,就需要查看源码了。
查看Bootstrap2.3.1版(未压缩)的源码,在872行可以找到如下函数,它定义了模态对话框类的构造函数:
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').load(this.options.remote)
}
Modal对象的构造在模态对话框显示之前进行。我们不用关心具体的实现细节,只需看到代码第3-4行将模态对话框的“隐藏”方法(hide)委托给带有data-dismiss="modal"属性的元素的click事件,通俗点说就是:找到父模态对话框中所有带data-dismiss="modal"属性的“关闭”元素,对其指定一个click事件处理函数,在这个函数中关闭该模态对话框。当子页面中包含“关闭”元素时,它也会被赋予父对话框的关闭操作,因此点击子页面(子模态对话框)的“关闭”元素就顺带把父模态对话框给关闭了!找到了问题的原因,我们只需根据需要,修改相应的选择器即可。根据笔者遇到的情况,只需在选择器后面添加一个:first过滤器,意为选择父模态对话框中的第一个“关闭”元素即可:
var Modal = function (element, options) {
this.options = options
this.$element = $(element)
.delegate('[data-dismiss="modal"]:first', 'click.dismiss.modal', $.proxy(this.hide, this))
this.options.remote && this.$element.find('.modal-body').load(this.options.remote)
}
至此,问题解决。
分享到:
相关推荐
Bootstrap模态对话框的开发与应用
修改 bootstrap 多个模态对话框 焦点冲突问题
angularjs ui-router+bootstrap ui-modal实现模态对话框
因系统需求,要在关闭子模态对话框后刷新父模态对话框,做的一个小测试。
主要为大家详细介绍了Bootstrap模态对话框的简单使用,感兴趣的小伙伴们可以参考一下
Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中,但是它只会加载一次,不过通过在事件中调用 removeData() 方法可以解决这...
本文实例讲述了Bootstrap模态对话框用法。分享给大家供大家参考,具体如下: 环境:bootstrap-3.3.5,jquery-3.0.0 代码: <!DOCTYPE html> <html> <head> <title>www.jb51.net bootstrap...
在使用bootstrap 模态对话框时需要在页面写对话框html,如果一个页面有许多地方需要对话框,那意味着需要写多个,感觉很麻烦,平时不太习惯bootstrap 模态对话框这种方式,所以做了个简单封装及扩展,增加了自定义...
Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中,但是它只会加载一次,不过通过在事件中调用 removeData() 方法可以解决这...
引导模态对话框使用 Bootstrap 模态对话框和 AJAX 的 Play 1.2.7 示例。 如何使用 AJAX 在 Play 框架中实现 Bootstrap 模态对话框的简单示例。
今天小编就为大家分享一篇Bootstrap模态对话框中显示动态内容的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
主要介绍了Bootstrap3 多个模态对话框无法显示的解决方案,非常不错,具有参考借鉴价值,需要的朋友可以参考下
这是一款非常实用的基于bootstrap的jQuery多功能模态对话框插件。该bootstrap jQuery模态对话框集警告框、确认框和对话框于一体。是一款不可多得的多功能、多用途的模态对话框插件。
twitter-bootstrap-rails-confirm, 使用 Twitter Bootstrap 确认对话框 :: bootstrap:: bootstrap:: rails::这里 gem 添加一些javascript来更改 Boostrap 2.3和 4的数据确认处理的默认行为。正常确认对话框显示带有...
eModal是一款非常实用的基于Bootstrap的模态窗口对话框插件。该模态窗口对话框插件可以制作警告框,确认框,提示框等,并且可以通过Ajax远程加载内容,还可以嵌入iframe框架等,功能非常齐全。