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

改章节是一篇关于微软模态对话框的帖子

Bootstrap用不多说了。Bootstrap自带有模态对话框插件，用使起来很便方，只要按照如下格式定义html，然后用js发触，或者用指定data属性的一般html素元来发触，后者的示例如下：

每日一道理

信念是巍巍大厦的栋梁，没有它，就只是一堆散乱的砖瓦；信念是滔滔大江的河床，没有它，就只有一片泛滥的波浪；信念是熊熊烈火的引星，没有它，就只有一把冰冷的柴把；信念是远洋巨轮的主机，没有它，就只剩下瘫痪的巨架。

<div >
  <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)
  }

至此，问题决解。

文章结束给大家分享下程序员的一些笑话语录： 雅虎最擅长的不是开通新业务，是关闭旧业务。