bootstrap源码阅读（一）——modal原理

模态框

关于如何读源码。
其实发现bootstrap的源码真的很好读，可能真的是这样，越是成熟的东西，它的源码也就越好读。

这是它的js目录文件，可以看到bootstrap其实就是这么一点儿js文件，我对于bootstrap的dropdown、tab、modal、transition比较感兴趣，所以我会从这几个js文件看起。
之所以先看modal.js，是因为是前人的铺垫，网上有很多前辈写过相关的博文，
比如说：http://www.cnblogs.com/aaronjs/p/3160863.html
所以先从这里读起。

modal API以及使用

先说一下模态框的用法(阅读API)

通过 data 属性或 JavaScript 调用模态框插件，可以根据需要动态展示隐藏的内容。模态框弹出时还会为 body 元素添加
.modal-open 类，从而覆盖页面默认的滚动行为，并且还会自动生成一个 .modal-backdrop
元素用于提供一个可点击的区域，点击此区域就即可关闭模态框。

这里很惊奇，因为自己以前写过这类的模态框，
一般来说是单独写一个遮罩层，没想到bootstrap居然是用的为body添加类的方法，顿时觉得确实是妙，因为单独写遮罩层的话，还需要查询文档高度。

使用方法一——通过 data 属性
不需写 JavaScript 代码也可激活模态框。通过在一个起控制器作用的元素（例如：按钮）上添加 data-toggle=”modal” 属性，或者 data-target=”#foo” 属性，再或者 href=”#foo” 属性，用于指向被控制的模态框。

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

指定data-toggle=”modal” 以及data-target=”#[id]”。
这里说一点的是，bootstrap的精妙之处就在于它定义了data-属性，以使得很多标签有了灵活性：
比如下拉框的实现也是绑定data-toggle=”dropdown”；
标签页 data-toggle=”tab”

使用方法二——通过 JavaScript 调用

$('#myModal').modal(options)

<!-- Button trigger modal -->
<button type="button" class=