蒙板樣式實(shí)現(xiàn)：
大家或許注意到了，在做模態(tài)彈出窗時(shí)，底部常常會(huì)有一個(gè)透明的黑色蒙層效果，如下圖所示：
在Bootstrap框架中為模態(tài)彈出窗也添加了一個(gè)這樣的蒙層樣式“modal-backdrop”，只不過(guò)他默認(rèn)情況下是全屏黑色的：
/*bootstrap.css文件第5424行～第5432行*/
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}
同樣，給其添加了一個(gè)過(guò)渡動(dòng)畫(huà)，從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)彈出窗提供了不同尺寸，一個(gè)是大尺寸樣式“modal-lg”，另一個(gè)是小尺寸樣式“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>
來(lái)簡(jiǎn)單的看一個(gè)示例效果：
對(duì)于這兩種尺寸的模態(tài)彈出窗，Bootstrap在媒體查詢中做過(guò)處理：代碼同上見(jiàn)bootstrap.css
我來(lái)試試：在右側(cè)補(bǔ)充代碼，把右側(cè)彈出窗修改為“小尺寸”
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
打開(kāi)微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書(shū)簽
舉報(bào)