需定義屬性

• data-target： 指向要觸發(fā)的模態(tài)框是哪一個(gè)
• data-toggle：控制模態(tài)框的顯示，值為modal
• data-dismiss：關(guān)閉模態(tài)框，值為modal

模態(tài)框的結(jié)構(gòu)

<div class="modal" role="dialog" id="layer">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1>頭部標(biāo)題</h1>
                </div>
                <div class="modal-body">
                    <p>內(nèi)容</p>
                </div>
                <div class="modal-footer">
                    <!--尾部，通常放置按鈕-->
                    <button class="btn btn-primary">確認(rèn)</button>
                    <button class="btn btn-default">取消</button>
                </div>
            </div>
        </div>
    </div>

實(shí)例

<div class="container">
    <button data-toggle="modal" data-target="#layer" class="btn btn-primary">觸發(fā)元素</button>
    <!--模態(tài)框-->
    <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>這是一個(gè)模態(tài)框</h1>
                </div>
                <div class="modal-body">
                    <p>我是內(nèi)容</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" data-dismiss="modal">確認(rèn)</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>