<div?class="container">
????<button?class="btn?btn-success"?data-toggle="modal"?data-target="#mybtn">彈出</button>
????<button?class="btn?btn-info"?data-toggle="modal"?data-target="#danger">這是一個(gè)測(cè)試按鈕</button>
????<div?id="danger"?class="modal?fade">
??????<div?class="modal-dialog">
????????<div?class="modal-content">
??????????<div?class="modal-header">
????????????<span>這是一個(gè)內(nèi)容</span>
????????????<button?type="button"?class="btn?btn-default"?data-dismiss="modal">關(guān)閉</button>
??????????</div>
????????</div>
??????</div>
????</div>
????<div?class="modal?fade"?id="mybtn"?tabindex="-1"?role="dialog"?aria-labelledby=""?aria-hidden="true">
??????<div?class="modal-dialog">
????????<div?class="modal-content">
??????????<div?class="modal-header">
????????????<button?type="button"?class="close"?data-dismiss="modal"?aria-hidden="true">&times;</button>
????????????<h4?class="modal-title"?id="">標(biāo)題</h4>
??????????</div>
??????????<div?class="modal-body">
????????????慕課網(wǎng)
??????????</div>
??????????<div?class="modal-footer">
????????????<button?type="button"?class="btn?btn-default"?data-dismiss="modal">關(guān)閉</button>
????????????<button?type="button"?class="btn?btn-primary">保存</button>
??????????</div>
????????</div>
??????</div>
????</div>
??</div>

你嘗試一個(gè)這個(gè)代碼,點(diǎn)擊第一個(gè)按鈕,出來(lái)的效果是這樣的:

第二個(gè)按鈕效果:

之前為什么沒(méi)辦法關(guān)閉,原因在于:

? ?<button class="btn btn-info" data-toggle="modal" data-target="#danger">這是一個(gè)測(cè)試按鈕</button>

這個(gè)意思是對(duì)應(yīng)id為danger的元素,實(shí)現(xiàn)面板效果.面板效果通常是用于實(shí)現(xiàn)用戶登錄或注冊(cè)功能,為了防止用戶亂點(diǎn)擊頁(yè)面內(nèi)容.默認(rèn)開(kāi)啟全屏遮罩,遮罩其實(shí)就類似于日常生活中,相片外層覆蓋的那層透明膜,可以清楚看到照片內(nèi)容,但觸摸只能摸到最外邊的膜.

之前是因?yàn)槟泓c(diǎn)擊button觸發(fā)面板遮罩效果,但沒(méi)有引入關(guān)閉的元素.才沒(méi)辦法關(guān)閉.

所以:

<div id="danger" class="modal fade">
? ? ?<div class="modal-dialog">
? ? ? ?<div class="modal-content">
? ? ? ? ?<div class="modal-header">
? ? ? ? ? ?<span>這是一個(gè)內(nèi)容</span>
? ? ? ? ? ?<button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
? ? ? ? ?</div>
? ? ? ?</div>
? ? ?</div>
? ?</div>

我們?cè)谠瓉?lái)的div上加多一個(gè)關(guān)閉按鈕,就可以實(shí)現(xiàn)關(guān)閉功能了.關(guān)閉功能是通過(guò)data-dismiss="modal"實(shí)現(xiàn)..