W3.CSS 模态框
模式是显示在当前页面顶部的对话框/弹出窗口：
W3.CSS 模态类
W3.CSS 为模态窗口提供以下类：
| 类 | 定义 |
|---|---|
| w3-模态 | 模态容器 |
| w3-模态内容 | 模态内容 |
创建模态框
这个w3-模态类定义模式的容器。
这个w3-模态内容类定义模式内容。
模态内容可以是任何 HTML 元素（div、标题、段落、图片等）。
示例
<!-- Trigger/Open the Modal -->
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-button">Open Modal</button>
<!-- The Modal -->
<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>Some text in the Modal..</p>
<p>Some text in the Modal..</p>
</div>
</div>
</div>
亲自试一试»
打开模态框
使用任何 HTML 元素打开模式。然而，这通常是一个按钮或链接。
添加单击时属性并指向模态的 id (编号01在我们的示例中），使用 document.getElementById() 方法。
关闭模态框
要关闭模式，请添加w3按钮class 到一个元素以及指向模态 id 的 onclick 属性（编号01）。您还可以通过单击模式外部来关闭它（请参见下面的示例）。
提示：×是关闭图标的首选 HTML 实体，而不是字母 "x"。
模态页眉和页脚
使用w3-容器类在模态内容中创建不同的部分：
示例
<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>Modal Header</h2>
</header>
<div class="w3-container">
<p>Some text..</p>
<p>Some text..</p>
</div>
<footer class="w3-container w3-teal">
<p>Modal Footer</p>
</footer>
</div>
</div>
亲自试一试»
模态作为卡片
要将模态显示为卡片，请添加以下之一w3-卡-*类到w3-模态内容容器：
动画模态框
使用任何w3-animate-zoom|顶部|底部|右|左从特定方向在模态中滑动的类：
示例
<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-动画不透明度w3-modal 元素上的类：
模态图片
单击图片将其显示为全尺寸模态：
示例
<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，您还可以在单击模态框外部时关闭模态框：
示例
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
亲自试一试»
高级：灯箱（模态图片库）
此示例展示了如何在模态框内添加图片幻灯片，以创建"lightbox"：
×
❮
❯
提示：要了解有关幻灯片的更多信息，请访问我们的W3.CSS 幻灯片章节。