W3.CSS Modal (模式)
W3.CSS Modal 類
W3.CSS 為模式窗口提供以下類：
| 類 | 定義 |
|---|---|
| w3-modal | 模式容器 |
| w3-modal-content | 模式內(nèi)容 |
創(chuàng)建模式
w3-modal 類定義一個模式的容器。
w3-modal-content 類定義模式的內(nèi)容。
模式內(nèi)容可以是任何 HTML 元素（div，標題，段落，圖像等）。
實例
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-button">Open Modal</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">×</span>
<p>一些文字。一些文字。一些文字。</p>
<p>一些文字。一些文字。一些文字。</p>
</div>
</div>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
打開一個模式
使用任何 HTML 元素打開模式。但是，這通常是按鈕或鏈接。
使用 document.getElementById（）方法，添加 onclick 屬性并指向模式的 ID（在我們的示例中為id01）。
關閉模式
要關閉模式，請將 w3-button 類與指向模式 ID（id01）的 onclick 屬性一起添加到元素中。您也可以通過在模式外部單擊來關閉它（請參見下面的示例）。
提示：＆times; 是關閉圖標的首選HTML實體，而不是字母“ x”。
模式頁眉和頁腳使用
使用 w3-container 類在模式內(nèi)容內(nèi)創(chuàng)建不同的部分：
實例
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<header class="w3-container w3-teal">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">×</span>
<h2>模式頭部</h2>
</header>
<div class="w3-container">
<p>一些文本..</p>
<p>一些文本..</p>
</div>
<footer class="w3-container w3-teal">
<p>模式頁腳</p>
</footer>
</div>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
模式卡
要將模式顯示為卡，請將 w3-card-* 類之一添加到 w3-modal-content 容器中：
動畫模式
使用任何 w3-animate-zoom | top | bottom | right | left 類從特定方向沿模式滑動：
實例
<div class="w3-modal-content w3-animate-top">
<div class="w3-modal-content w3-animate-bottom">
<div class="w3-modal-content w3-animate-left">
<div class="w3-modal-content w3-animate-right">
<div class="w3-modal-content w3-animate-opacity">
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
您還可以通過在 w3-modal 元素上設置 w3-animate-opacity 類來淡入模式的背景色：
模式圖像
單擊圖像以全尺寸顯示為模式：
實例
<div id="modal01" class="w3-modal w3-animate-zoom" onclick="this.style.display='none'">
<img class="w3-modal-content" src="img_snowtops.jpg">
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
模式圖像庫
點擊圖片以完整尺寸顯示：
實例
<div class="w3-container w3-third">
<img src="img_snowtops.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="w3-container w3-third">
<img src="img_lights.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="w3-container w3-third">
<img src="img_mountains.jpg" style="width:100%" onclick="onClick(this)">
</div>
</div>
<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
<img class="w3-modal-content" id="img01" style="width:100%">
</div>
<script>
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
}
</script>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
模式登錄表
本示例創(chuàng)建登錄模式：
實例
<div class="w3-container">
<h2>W3.CSS 登錄模式</h2>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-green w3-large">登錄</button>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
帶選項卡內(nèi)容的模式
本示例創(chuàng)建帶有選項卡式內(nèi)容的模式：
實例
<div class="w3-container">
<h2>模式標簽</h2>
<p>在此示例中，我們在模式內(nèi)添加選項卡式內(nèi)容。</p>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">打開i選項卡模式</button>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
關閉模式
在上面的示例中，我們使用按鈕關閉模式。但是，使用一點點 JavaScript，您也可以在模式框外部單擊時關閉模式：
實例
// 獲取模式
var modal = document.getElementById('id01');
// 當用戶單擊模式之外的任何位置時，將其關閉
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
進階：Lightbox（模組圖片庫）
本示例說明如何在模式內(nèi)部添加圖片幻燈片，以創(chuàng)建“燈箱”：
實例
<div class="w3-row-padding" style="margin:0 -16px">
<div class="w3-col s4">
<img src="img_nature_wide.jpg" style="width:100%;cursor:pointer"
onclick="openModal();currentDiv(1)" class="w3-hover-shadow">
</div>
<div class="w3-col s4">
<img src="img_snow_wide.jpg" style="width:100%;cursor:pointer"
onclick="openModal();currentDiv(2)" class="w3-hover-shadow">
</div>
<div class="w3-col s4">
<img src="img_mountains_wide.jpg" style="width:100%;cursor:pointer"
onclick="openModal();currentDiv(3)" class="w3-hover-shadow">
</div>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
更多建議：