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";
}
}
試一試»