W3.CSS Modal (模式)
W3.CSS Modal 类
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">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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
打开一个模式
使用任何 HTML 元素打开模式。但是，这通常是按钮或链接。
使用 document.getElementById（）方法，添加 onclick 属性并指向模式的 ID（在我们的示例中为id01）。
关闭模式
要关闭模式，请将 w3-button 类与指向模式 ID（id01）的 onclick 属性一起添加到元素中。您也可以通过在模式外部单击来关闭它（请参见下面的示例）。
提示：＆times; 是关闭图标的首选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-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 类来淡入模式的背景色：
模式图像
单击图像以全尺寸显示为模式：
实例
<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-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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
模式登录表
本示例创建登录模式：
实例
<div class="w3-container">
<h2>W3.CSS 登录模式</h2>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-green w3-large">登录</button>
尝试一下 »
点击“尝试一下”按钮查看在线实例
带选项卡内容的模式
本示例创建带有选项卡式内容的模式：
实例
<div class="w3-container">
<h2>模式标签</h2>
<p>在此示例中，我们在模式内添加选项卡式内容。</p>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">打开i选项卡模式</button>
尝试一下 »
点击“尝试一下”按钮查看在线实例
关闭模式
在上面的示例中，我们使用按钮关闭模式。但是，使用一点点 JavaScript，您也可以在模式框外部单击时关闭模式：
实例
// 获取模式
var modal = document.getElementById('id01');
// 当用户单击模式之外的任何位置时，将其关闭
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
尝试一下 »
点击“尝试一下”按钮查看在线实例
进阶：Lightbox（模组图片库）
本示例说明如何在模式内部添加图片幻灯片，以创建“灯箱”：
实例
<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>
尝试一下 »
点击“尝试一下”按钮查看在线实例