<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">這是一個測試按鈕</button>
????<div?id="danger"?class="modal?fade">
??????<div?class="modal-dialog">
????????<div?class="modal-content">
??????????<div?class="modal-header">
????????????<span>這是一個內容</span>
????????????<button?type="button"?class="btn?btn-default"?data-dismiss="modal">關閉</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="">標題</h4>
??????????</div>
??????????<div?class="modal-body">
????????????慕課網
??????????</div>
??????????<div?class="modal-footer">
????????????<button?type="button"?class="btn?btn-default"?data-dismiss="modal">關閉</button>
????????????<button?type="button"?class="btn?btn-primary">保存</button>
??????????</div>
????????</div>
??????</div>
????</div>
??</div>

你嘗試一個這個代碼,點擊第一個按鈕,出來的效果是這樣的:

第二個按鈕效果:

之前為什么沒辦法關閉,原因在于:

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

這個意思是對應id為danger的元素,實現面板效果.面板效果通常是用于實現用戶登錄或注冊功能,為了防止用戶亂點擊頁面內容.默認開啟全屏遮罩,遮罩其實就類似于日常生活中,相片外層覆蓋的那層透明膜,可以清楚看到照片內容,但觸摸只能摸到最外邊的膜.

之前是因為你點擊button觸發面板遮罩效果,但沒有引入關閉的元素.才沒辦法關閉.

所以:

<div id="danger" class="modal fade">
? ? ?<div class="modal-dialog">
? ? ? ?<div class="modal-content">
? ? ? ? ?<div class="modal-header">
? ? ? ? ? ?<span>這是一個內容</span>
? ? ? ? ? ?<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
? ? ? ? ?</div>
? ? ? ?</div>
? ? ?</div>
? ?</div>

我們在原來的div上加多一個關閉按鈕,就可以實現關閉功能了.關閉功能是通過data-dismiss="modal"實現..