对于模态框的使用

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

<!-- 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">&times;</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)