W3.CSS 模態框
模態框是一個對話方塊/彈出視窗，顯示在當前頁面的頂部
W3.CSS 模態框類
W3.CSS 為模態視窗提供以下類
| 類 | 定義 |
|---|---|
| w3-modal | 模態容器 |
| w3-modal-content | 模態內容 |
建立一個模態框
w3-modal 類定義模態框的容器。
w3-modal-content 類定義模態框內容。
模態框內容可以是任何 HTML 元素（div、標題、段落、影像等）。
示例
<!-- 觸發/開啟模態框 -->
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-button">開啟模態框</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 元素開啟模態框。但是，這通常是按鈕或連結。
新增 onclick 屬性，並使用 document.getElementById() 方法指向模態框的 id（在我們的示例中為 id01）。
關閉模態框
要關閉模態框，請將 w3-button 類新增到元素中，並新增一個指向模態框 id (id01) 的 onclick 屬性。您也可以透過單擊模態框外部來關閉它（請參閱下面的示例）。
提示：× 是關閉圖示的首選 HTML 實體，而不是字母 "x"。
模態框標題和頁尾
使用 w3-container 類在模態框內容中建立不同的部分
示例
<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-zoom">
<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 類來淡入模態框的背景顏色
模態框影像
點選圖片以全尺寸模態框顯示
示例
<img src="img_snowtops.jpg" onclick="document.getElementById('modal01').style.display='block'" class="w3-hover-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-row-padding">
<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>
自己試試 »
模態登入表單
此示例建立一個用於登入的模態框
記住我
帶選項卡內容的模態框
此示例建立帶選項卡內容的模態框
關閉模態框
在上述示例中，我們使用按鈕關閉模態框。但是，使用少量 JavaScript，您也可以在單擊模態框外部時關閉模態框
示例
// 獲取模態框
var modal = document.getElementById('id01');
// 當用戶在模態框外部的任何位置單擊時，關閉它
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
自己試試 »
高階：燈箱（模態圖片庫）
此示例展示瞭如何在模態框中新增影像幻燈片，以建立“燈箱”
×
❮ ❯
提示：要了解更多關於幻燈片的資訊，請訪問我們的 W3.CSS 幻燈片 章。
