bootstrap之模态框

先说一下模态框的用法(阅读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>
1
1

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

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

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

<!-- Button trigger modal --><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">  Launch demo modal</button><!-- Modal --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  <div class="modal-dialog">    <div class="modal-content">      <div class="modal-header">        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>        <h4 class="modal-title" id="myModalLabel">Modal title</h4>      </div>      <div class="modal-body">        ...      </div>      <div class="modal-footer">        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>        <button type="button" class="btn btn-primary">Save changes</button>      </div>    </div>  </div></div>