免費(fèi)AI編程助手
W3.CSS Modal (模式)
W3.CSS Modal 類
W3.CSS 為模式窗口提供以下類：
| 類 | 定義 |
|---|---|
| w3-modal | 模式容器 |
| w3-modal-content | 模式內(nèi)容 |
創(chuàng)建模式
w3-modal 類定義一個(gè)模式的容器。
w3-modal-content 類定義模式的內(nèi)容。
模式內(nèi)容可以是任何 HTML 元素（div，標(biāo)題，段落，圖像等）。
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
打開一個(gè)模式
使用任何 HTML 元素打開模式。但是，這通常是按鈕或鏈接。
使用 document.getElementById（）方法，添加 onclick 屬性并指向模式的 ID（在我們的示例中為id01）。
關(guān)閉模式
要關(guān)閉模式，請將 w3-button 類與指向模式 ID（id01）的 onclick 屬性一起添加到元素中。您也可以通過在模式外部單擊來關(guān)閉它（請參見下面的示例）。
提示：＆times; 是關(guān)閉圖標(biāo)的首選HTML實(shí)體，而不是字母“ x”。
模式頁眉和頁腳使用
使用 w3-container 類在模式內(nèi)容內(nèi)創(chuàng)建不同的部分：
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
模式卡
要將模式顯示為卡，請將 w3-card-* 類之一添加到 w3-modal-content 容器中：
動(dòng)畫模式
使用任何 w3-animate-zoom | top | bottom | right | left 類從特定方向沿模式滑動(dòng)：
實(shí)例
<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">
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
您還可以通過在 w3-modal 元素上設(shè)置 w3-animate-opacity 類來淡入模式的背景色：
模式圖像
單擊圖像以全尺寸顯示為模式：
實(shí)例
<div id="modal01" class="w3-modal w3-animate-zoom" onclick="this.style.display='none'">
<img class="w3-modal-content" src="img_snowtops.jpg">
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
模式圖像庫
點(diǎn)擊圖片以完整尺寸顯示：
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
模式登錄表
本示例創(chuàng)建登錄模式：
實(shí)例
<div class="w3-container">
<h2>W3.CSS 登錄模式</h2>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-green w3-large">登錄</button>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
帶選項(xiàng)卡內(nèi)容的模式
本示例創(chuàng)建帶有選項(xiàng)卡式內(nèi)容的模式：
實(shí)例
<div class="w3-container">
<h2>模式標(biāo)簽</h2>
<p>在此示例中，我們在模式內(nèi)添加選項(xiàng)卡式內(nèi)容。</p>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">打開i選項(xiàng)卡模式</button>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
關(guān)閉模式
在上面的示例中，我們使用按鈕關(guān)閉模式。但是，使用一點(diǎn)點(diǎn) JavaScript，您也可以在模式框外部單擊時(shí)關(guān)閉模式：
實(shí)例
// 獲取模式
var modal = document.getElementById('id01');
// 當(dāng)用戶單擊模式之外的任何位置時(shí)，將其關(guān)閉
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
進(jìn)階：Lightbox（模組圖片庫）
本示例說明如何在模式內(nèi)部添加圖片幻燈片，以創(chuàng)建“燈箱”：
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
更多建議：