bootstrap模态框使用笔记

需定义属性

• data-target： 指向要触发的模态框是哪一个
• data-toggle：控制模态框的显示，值为modal
• data-dismiss：关闭模态框，值为modal

模态框的结构

<div class="modal" role="dialog" id="layer">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1>头部标题</h1>
                </div>
                <div class="modal-body">
                    <p>内容</p>
                </div>
                <div class="modal-footer">
                    <!--尾部，通常放置按钮-->
                    <button class="btn btn-primary">确认</button>
                    <button class="btn btn-default">取消</button>
                </div>
            </div>
        </div>
    </div>

实例

<div class="container">
    <button data-toggle="modal" data-target="#layer" class="btn btn-primary">触发元素</button>
    <!--模态框-->
    <div class="modal" role="dialog" id="layer">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal"><span>&times;</span></button>
                    <h1>这是一个模态框</h1>
                </div>
                <div class="modal-body">
                    <p>我是内容</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" data-dismiss="modal">确认</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>