一个同事第一次使用Bootstrap，问了我一个诡异的问题——Modal Dialog（模态对话框）显示之后立即就自己关闭了。代码很简单，我看了下之后，感觉确实不应该有什么问题。
<script type="text/javascript" src="./test1_files/jquery.min.js"></script> <script src="./test1_files/bootstrap.js"></script> <script src="./test1_files/bootstrap.min.js"></script> <script src="./test1_files/bootstrap-select.js"></script> <script src="./test1_files/bootstrap-switch.js"></script> <script src="./test1_files/bootstrap-dropdown.js"></script>
经过追查，发现了上面这样一个很怪异的地方，bootstrap.js和bootstrap.min.js都被include进来了，去掉其中一个之后，果然就ok了。这是什么原因呢？
经过查看bootstrap的源代码，原来模态对话框的显示和隐藏，是通过toggle来控制的。核心的代码就是在document ready的时候调用，绑定一个toggle事件，点击之后，原来隐藏的就显示，原来显示的就隐藏。而bootstrap.js和bootstrap.min.js，其实就是一样的代码，相当于元素被绑定了两个事件，相继执行，所以就出现了闪现的问题。
例如，我们仿照bootstrap的代码，用下面的代码进行试验，就可以看到，元素是如何先隐藏再显示的
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
});
$("button").click(function(){
$("#div1").fadeToggle();
});
});
</script>
</head>
<body>
<button>点击这里，使矩形淡入淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
</body>
</body>
</html>
刚刚说了，bootstrap.js和bootstrap.min.js本质是一样的。我们平时在使用很多插件的时候，都会遇到这样的情况：在开发环境，使用js，发布环境使用min.js，因为后者是前者的压缩版，网上可以找到很多工具帮我们完成这个压缩过程。
The post bootstrap中modal dialog显示之后立即隐藏掉的问题 appeared first on 邮递员大叔.