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 属性并指向模态框的 id（我们示例中的 id01），使用 document.getElementById() 方法。
关闭模态框
要关闭模态框，请将 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 幻灯片 章节。
