bootstrap 模态框应用总结

背景：没有什么专业前台设计和开发的经验，所以在做自己网站的时候选择了bootstrap。在开发过程中，遇到了一些比较奇怪的问题，影响最深的是模态框dialog一块的，特小总结一下。

1.中文官网上说想实现dialog层上再弹出dialog需要自己写代码，否则会有奇怪的异常(我遇到了，在我的第一层弹出框里我加了一个再弹出的框，弹出的时候正常着。但是在我点击两层模态框外面打算关闭的时候，出了问题，底层的遮罩层没有正确隐藏)。

2.在手动关闭模态框并打算做处理的时候，需要按照官网上说的调用给出的处理函数。不能直接在调用关闭按钮的click()函数后面写自己的代码。

$("#create_question").modal('hide');
$('#create_question').on('hidden.bs.modal', function (e) {
	$("#ajax_show_question").click();
});

此处的create_question为弹出dialog的id，关闭的时候可以用上面bootstrap提供的关闭hide方式，也可以用$("#create_question .close").click();直接触发关闭按钮的型式。重点的是如果你打算关闭模态框后，要做诸如刷新模板页的操作，那么需要放到官网提供的类似绑定函数内hidden.bs.modal业务处理内。如果直接写在hide后面的话，模态框可以关闭，但是遮罩层不会隐藏，即便是找到遮罩层的dom元素调整z-index或者hide隐藏都不是很靠谱，因为在谷歌下，这么做了之后会发现，鼠标滑轮滚动的时候页面不会滚动。

3.在打开模块框前你可能需要先做一些业务判断决定要不要弹出模态框，我第一次实现的代码是在触发模态框的a标签上定义onclick事件，然后在onclick处理事件函数内根据判断返回true或者false。后来测试的时候，发现悲剧了，哪怕返回false模态框也会弹出，发现是自己有点太想当然了，无语之下继续查看官网文档模态框的说明，发现了和上面的关闭模态框事件一样，在打开的时候也有类似的绑定事件接口。

if (!show_status){
	$('#create_question').on('show.bs.modal', function (e) {
		return false;
	});
}else{
	$('#create_question').off('show.bs.modal');
}

show_status为前面业务判断的结果标记，当为true时表示弹出，反之不弹出，show.bs.modal为将要打开前的绑定事件处理。

总结：以上是自己关于bootstrap模态框使用过程中的一些整理总结。