蒙板樣式實現(xiàn)：
大家或許注意到了，在做模態(tài)彈出窗時，底部常常會有一個透明的黑色蒙層效果，如下圖所示：
在Bootstrap框架中為模態(tài)彈出窗也添加了一個這樣的蒙層樣式“modal-backdrop”，只不過他默認情況下是全屏黑色的：
/*bootstrap.css文件第5424行～第5432行*/
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}
同樣，給其添加了一個過渡動畫，從fade到in，把opacity值從0變成了0.5。上圖展示的就是in狀態(tài)下的效果：
/*bootstrap.css文件第5433行～第5440行*/
.modal-backdrop.fade {
filter: alpha(opacity=0);
opacity: 0;
}
.modal-backdrop.in {
filter: alpha(opacity=50);
opacity: .5;
}
兩種尺寸選擇：
除此之外，Bootstrap框架還為模態(tài)彈出窗提供了不同尺寸，一個是大尺寸樣式“modal-lg”，另一個是小尺寸樣式“modal-sm”。其結(jié)構(gòu)上稍做調(diào)整：
<!-- 大尺寸模態(tài)彈出窗 -->
<div class="modal fade bs-example-modal-lg" tabindex="-1"role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<divclass="modal-dialog modal-lg">
<divclass="modal-content"> ... </div>
</div>
</div>
<!-- 小尺寸模態(tài)彈出窗 -->
<divclass="modal fade bs-example-modal-sm"tabindex="-1"role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<divclass="modal-dialog modal-sm">
<divclass="modal-content"> ... </div>
</div>
</div>
來簡單的看一個示例效果：
對于這兩種尺寸的模態(tài)彈出窗，Bootstrap在媒體查詢中做過處理：代碼同上見bootstrap.css
我來試試：在右側(cè)補充代碼，把右側(cè)彈出窗修改為“小尺寸”
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報