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

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

[html]

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

查看Bootstrap 2.3.1版（未压缩）的源码，在872行可以找到如下函数，它定义了模态对话框类的构造函数：

[java script]
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)
}

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过滤器，意为选择父模态对话框中的第一个“关闭”元素即可：

[java script]
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)
}

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)
}至此，问题解决。

对话框标题

对话框标题