BS3 Modals
簡介
Modal 視窗在應用中是一種使用非常廣泛的元件，它的特性就是在視窗出現時，使用者必須明確的完成某項動作；例如輸入一些資料或者取消該視窗，否則視窗會佔據整個螢幕，迫使使用者在應用的過程中作出決定或動作，應用才能繼續進行。這讓應用的設計者在一定程度上可以掌控應用的運行方式和節奏。
- .modal
- 為整個 modal 的主容器，內中必須包含一個 .modal-dialog 容器。
- .modal-dialog
- 次容器，內中必須包含一個 .modal-content 次容器。
- .modal-content
- 次容器，內中可選擇性包含 .modal-header, .modal-footer 類別容器，但都會包含 .modal-body 容器，以存放內容。
- .modal-header, .modal-body, modal-footer
- 將 .modal-content 的內容區分成三大塊，.modal-body 為必要，其它兩者為選項。
- .modal-title
- 定義內容為 modal 的標題，一般和 <h1> 。。。 <h4> 搭配使用。
- .modal-lg, .modal-sm
- 改變 modal 的大小，預設寬為 600px，.modal-lg 寬為 900px，.modal-sm 寬為 300px。要特別注意的是：雖然類別名稱為 modal-* ，但在實作時，卻是應用在 .modal-dialog 容器類別的元件。
- .modal-backdrop
- 這個樣式類別一般不寫在 HTML 的程式碼中，而是由 bootstrap.js 程式控制，類別樣式所定義的是 modal 背後的遮罩。
以下為 BS3 v3.3.6 的 bootstrap.css 樣式表中，與 .modal 相關的樣式設定。
.modal-open {
overflow: hidden;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
}
.modal.fade .modal-dialog {
-webkit-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
-webkit-transform: translate(0, -25%);
-ms-transform: translate(0, -25%);
-o-transform: translate(0, -25%);
transform: translate(0, -25%);
}
.modal.in .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
.modal-content {
position: relative;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
outline: 0;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}
.modal-backdrop.fade {
filter: alpha(opacity=0);
opacity: 0;
}
.modal-backdrop.in {
filter: alpha(opacity=50);
opacity: .5;
}
.modal-header {
padding: 15px;
border-bottom: 1px solid #e5e5e5;
}
.modal-header .close {
margin-top: -2px;
}
.modal-title {
margin: 0;
line-height: 1.42857143;
}
.modal-body {
position: relative;
padding: 15px;
}
.modal-footer {
padding: 15px;
text-align: right;
border-top: 1px solid #e5e5e5;
}
.modal-footer .btn + .btn {
margin-bottom: 0;
margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
margin-left: 0;
}
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll;
}
@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;
}
}
@media (min-width: 992px) {
.modal-lg {
width: 900px;
}
}
範例
範例中先建立一個按鈕，點按按鈕則會出現一個 modal 的視窗。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin: 0 auto;
max-width: 1000px;
padding: 20px;
}
</style>
CSS 中沒有設定其它樣式。
HTML
<body>
</body>
第 2 行，建立一個按鈕，藉以控制 modal 的顯示。data-toggle="modal" 指定控制元件的型態，data-target="#myModal"則指定要控制元件的 id。
第 4 行，建立 .modal 元件，id 值為 #myModal，樣式類別 .fade 及 .in 定義 modal 元件出現時具有動畫效果。
第 6 行，建立 .modal-dialog 元件，如果要改變 modal 元件的大小， .modal-lg 或 .modal-sm 樣式類別需定義在這個元件。
第 9, 16 行，利用 .bg-primary 樣式類別改變 .modal-header 及 .modal-footer 的底色。
