Bootstrap模态框学习笔记

<!--创建模态框(modal)-->
<!--什么是模态框(modal)？模态框就是覆盖在父窗体上的子窗体。通常是用来显示一个单独的问题，在不脱离父页面的情况下有
一些互动-->
<!--为模态框添加一个控制元素button或者a等等，控制元素中添加data-toggla='modal'用于打开模态窗口,添加data-target=
'#layer'或者href='#layer'用来选择打开哪一个模态框，一个页面上可以同时存在多个模态框。-->
<button class="btn btn-primary btn-lg " data-toggle="modal" data-target="#layer">显示Modal</button>
<!-- 创建一个模态框，role指定dialog，class指定modal，aria-hidden='true'保持模态框未被点击前保持不可见-->
<div class="modal fade" role="dialog" aria-hidden="true" aria-labelledby="myModalLabel" id="layer">
    <!--从外至内依次包括modal-dialog>modal-content>modal-header==modal-body==modal-footer-->
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <!--data-dismiss是一个H5属性，这里用来关闭modal-->
                <button type="button" class="close" data-dismiss="modal">
                    &times;
                </button>
                <h4>Modal标题</h4>
            </div>
            <div class="modal-body">Somethingelse</div>
            <div class="modal-footer">
                <input type="button" class="btn btn-info" value="取消" data-dismiss="modal"/>
                <input type="button" class="btn btn-warning" value="确认" data-dismiss="modal"/>
            </div>
        </div>
    </div>
</div>