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">打开模式
<!-- 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">×
<p>模态框中的某些文本..</p>
<p>模态框中的某些文本..</p>
</div>
</div>
</div>
亲自尝试 »
打开模式
使用任何 HTML 元素打开模式。但这通常是一个按钮或链接。
添加 点击 属性并指向模态框的 id（id01 在我们的示例中），使用 document.getElementById() 方法。
关闭模式
要关闭模式，请添加 w3-按钮 类与指向模式 id 的 onclick 属性一起添加到元素中（id01）。您也可以通过单击模式外部来关闭它（见下面的示例）。
提示： × 是关闭图标的首选 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">×
<h2>模态标题</h2>
</header>
<div class="w3-container">
<p>一些文字..</p>
<p>一些文字..</p>
</div>
<footer class="w3-container w3-teal">
<p>模态页脚</p>
</footer>
</div>
</div>
亲自尝试 »
模态框作为卡片
要将模式显示为卡片，请添加以下任一内容 w3-卡-* 课程w3-模态框内容 容器：
动画模式
使用任何 w3-动画缩放|顶部|底部|右|左 从特定方向滑入模式的类：
例子
<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>
函数 onClick（元素）{
文档.getElementById（“img01”）。src = 元素.src；
document.getElementById("modal01").style.display = "block";
}
</script>
亲自尝试 »
模态登录表单
此示例创建一个登录模式：
记住账号
带有标签内容的模式
此示例创建一个带有选项卡内容的模式：
关闭模式
在上面的例子中，我们使用按钮来关闭模态框。但是，使用一点 JavaScript，您也可以在点击模态框外部时关闭模态框：
例子
// 获取模态框
var modal = document.getElementById('id01');
// 当用户点击模态框外的任意位置时，关闭它
窗口.onclick = 函数（事件）{
如果 (event.target == modal) {
modal.style.display = "无";
}
}
亲自尝试 »
高级：灯箱（模态图库）
此示例显示如何在模式中添加图像幻灯片以创建“灯箱”：
×
❮
❯
提示： 要了解有关幻灯片的更多信息，请访问我们的W3.CSS 幻灯片 章节。
