實現原理解析：
bootstrap中的“模態彈出框”有以下幾個特點：
1、模態彈出窗是固定在瀏覽器中的。
2、單擊右側全屏按鈕，在全屏狀態下，模態彈出窗寬度是自適應的，而且modal-dialog水平居中。
3、當瀏覽器視窗大于768px時，模態彈出窗的寬度為600px。
固定在瀏覽器(源代碼)實現：
/*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;
}
水平居中(源代碼)實現：
/*bootstrap.css文件第5407行～第5411行*/
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
當瀏覽器視窗大于768px時，模態彈出窗的寬度為600px（源代碼）實現：
/*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;
}
}
我來試試，在最右側結果窗口中試一試本小節的彈出框的三個特點。
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報