`
he91_com
  • 浏览: 370546 次
文章分类
社区版块
存档分类
最新评论

解决Bootstrap模态对话框嵌套的一个bug

阅读更多
<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)
  }

至此,问题解决。







分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics