Bootstrap模态对话框嵌套bug的解决方案

最近在用Bootstrap做项目，越来越发现这是个很好的框架。不过在用的同时也遇到了不少的问题，不过都已经自行解决啦。下面是我对于Bootstrap模态对话框嵌套bug的研究。

什么是模态对话框的嵌套

Bootstrap不用多说了。Bootstrap自带有模态对话框插件，使用起来很方便，只需按照如下格式定义html，然后用js触发，或者用指定data属性的普通html元素来触发。下面来看一段出现问题的代码：

<div id="part1" class="modal fade">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">  <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">技术部</h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#signup">快速报名</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- modal -->

其中定义了data-dismiss="modal"属性的按钮用于关闭该模态对话框，称其为“关闭”按钮。一般情况下，这样的默认设置没有任何问题。但在项目中遇到的问题是：所设计设计的"modal-footer"里面的内容有一个按钮，包含另一个子模态对话框的定义时，问题就出现了。子模态对话框弹出之后，点击其“关闭”按钮，会顺带着把父模态对话框给关闭掉。要解决这样的问题，或者说是Bootstrap的一个bug，就需要查看源码了。

Bootstrap相关的源码研究

好不容易找到了相关的源码。查看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)
  }

问题解决。