W3.CSS模态
模态是显示在当前页面顶部的对话框/弹出窗口：
如何创建模式
例
<!-- Trigger/Open the Modal -->
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-btn">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-closebtn">×</span>
<p>Some text in the Modal..</p>
<p>Some text in the Modal..</p>
</div>
</div>
</div> 试一试» 在“W3-模式”级
一个模式可以是任何HTML容器（如<DIV>）与类=“W3模态”。
在“W3-模式内容”类
所有模态的内容应该被放置在与类=“W3峰内容”HTML容器。
模式的内容可以是任何HTML元素（标题，段落，图像，等等）
打开一个模式
使用任何HTML元素打开模式。 这通常是一个按钮或链接。
onclick属性并指向添加到模态（在我们的例子ID01）的ID，使用的document.getElementById（）方法并指定一个相匹配的“触发”按钮（ID01）一个唯一的ID。
关闭模态
要关闭一个模式，在W3-为closeBtn类指向模式（ID01）的ID的onclick属性一起添加到一个元素。 您也可以通过单击模式以外关闭它（见下面的例子）。
 | ＆倍; （×）是为关闭按钮的优选图标，而不是字母“x”的HTML实体。 |
|---|
莫代尔页眉和页脚
在<div>带班=“W3模态含量”，使用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-closebtn">×</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-动画变焦的|顶部|底部|右|左班从特定方向的模态滑动：
例
<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模态）：
模态图像
点击图片在全尺寸显示它：
×
例
<img src="img_fjords.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_fjords.jpg">
</div>
试一试» 莫代尔图片廊
点击图片在全尺寸显示它：
× ![]()
例
<div class="w3-row-padding">
<div class="w3-container w3-third">
<img src="img_fjords.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";
}
}
试一试»