解决Bootstrap模态对话框嵌套的一个bug
来源:互联网 发布:朝鲜 中国 关系 知乎 编辑:程序博客网 时间:2024/06/08 10:57
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,就需要查看源码了。
查看Bootstrap 2.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模态对话框嵌套的一个bug
- Bootstrap模态对话框
- Bootstrap 模态对话框
- 解决NestedScrollView嵌套RecycleView的bug
- 解决NestedScrollView嵌套RecycleView的bug
- 解决customvalidator中的错误信息不能再ValidationSummary中以对话框的形式弹出的一个Bug
- 刚发现一个BUG,模态对话框url中含有#时出现的问题
- Bootstrap 模态对话框居中
- 解决h264bitstream的一个bug
- 一个奇葩bug的解决
- 关于一个bug的解决
- FlowingDrawer 一个bug的解决
- NGUI的一个bug解决
- 一个bug的解决过程
- 解决Bootstrap modal 事件监听多次的BUG
- 解决Bootstrap 模态对话框只加载一次请求数据问题
- ajax 和bootstrap混用手残出现的一个bug
- 接口调试的一个bug的解决
- IPhone-多视图
- 黑马程序员---Java基础之properties集合和编码解码
- spring多数据源配置
- 03 Android Gallery 和 ImageView 的组合使用
- C++拷贝构造函数(深拷贝,浅拷贝)参考一
- 解决Bootstrap模态对话框嵌套的一个bug
- hdoj 1078 FatMouse and Cheese(记忆化搜索)
- qemu 调试 kernel (二)
- 关于怎样提权的小帖子
- jquery实现ajax联动框 二
- 解决linux ping: unknown host www.baidu.com
- Weka学习 Apriori算法if( !m_car)
- C++拷贝构造函数(深拷贝,浅拷贝)参考二
- Revit 2014 API新功能网络视频讲座 5月14号下午14:30(可下载讲座视频)