BootStrap嵌套模态框关闭

**

先说点废话

有时业务需要在模态框上继续打开模态框，但是子模态框关闭会导致父级也同时关闭

**
Bootstrap自带的模态窗口关闭写法是

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
    </button>

重点是data-dismiss="modal"
如果要捕获关闭事件

 $('#model').on('hide.bs.modal', function () {
            $("#model").removeData("bs.modal");
        });

上面的model就是用于展示模态框的元素ID

**

重点来了

**
如果父模态框和子模态框都是这种写法，那么子模态框关闭的事件势必会冒泡到父模态框，因为bootstrap的模态框是伪子页面。

网上的做法是：

修改bootstap源代码
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
修改为

this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]:first', $.proxy(this.hide, this))
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]:last', $.proxy(this.hide, this))

个人感觉不是很可取（有可能会导致其他未知问题），而且不利于小白查找。

我的做法是：
将代码

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
    </button>

中的data-dismiss="modal"去掉，改成οnclick="methodName()"
然后在JS中

function methodName(){
	$("#model").removeData("bs.modal");
}

这样每个模态框的关闭就不会互相影响了

另外，我朋友也推荐了一种做法
大致思路是，还按照最初写法，然后在绑定事件中判断事件来源，比如说

 $('#model').on('hide.bs.modal', function (event) {
            $("#model").removeData("bs.modal");
			//event.target 指向源
			//给每个点击关闭的事件元素加个属性，然后这里处理时进行过滤判断...
			//event.target.getAttribute("aaa");
        });

最后那行里的aaa对应下面代码块的aaa=“AAA”

<button type="button" aaa="AAAA" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

这个思路的代码我没尝试过，有兴趣的可以自己研究研究