實(shí)現(xiàn)原理解析：
bootstrap中的“模態(tài)彈出框”有以下幾個(gè)特點(diǎn)：
1、模態(tài)彈出窗是固定在瀏覽器中的。
2、單擊右側(cè)全屏按鈕，在全屏狀態(tài)下，模態(tài)彈出窗寬度是自適應(yīng)的，而且modal-dialog水平居中。
3、當(dāng)瀏覽器視窗大于768px時(shí)，模態(tài)彈出窗的寬度為600px。
固定在瀏覽器(源代碼)實(shí)現(xiàn)：
/*bootstrap.css文件第5379行～第5389行*/
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
}
水平居中(源代碼)實(shí)現(xiàn)：
/*bootstrap.css文件第5407行～第5411行*/
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
當(dāng)瀏覽器視窗大于768px時(shí)，模態(tài)彈出窗的寬度為600px（源代碼）實(shí)現(xiàn)：
/*bootstrap.css文件第5479行～第5491行*/
@media (min-width: 768px) {
.modal-dialog {
width: 600px;
margin: 30px auto;
}
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}
.modal-sm {
width: 300px;
}
}
我來(lái)試試，在最右側(cè)結(jié)果窗口中試一試本小節(jié)的彈出框的三個(gè)特點(diǎn)。
請(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)