对于模态框的使用

对于模态框的使用，我一直都是看多了模糊的记得如何使用，但用起来的时候因为一个小错误导致调式很长时间，现在决定系统的去学习一下：先看这个例子:

<!-- 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">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</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>

务必为 .modal 添加 role=”dialog” 和 aria-labelledby=”…” 属性，用于指向模态框的标题栏；

为 .modal-dialog 添加 aria-hidden=”true” 属性。

aria-hidden字符串。可选值为true和false,true表示元素隐藏(不可见)，false表示元素可见。

.fade 表示淡入淡出的效果。

2.模态框提供了两个可选尺寸，通过为 .modal-dialog 增加一个样式调整类实现。bs-example-modal-lg和bs-example-modal-sm

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
...
</div>
</div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
...
</div>
</div>
</div>

不需写 JavaScript 代码也可激活模态框。通过在一个起控制器作用的元素（例如：按钮）上添加 data-toggle=”modal” 属性

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

或者

只需一行 JavaScript 代码，即可通过元素的 id myModal 调用模态框：
$('#myModal').modal(options)