W3.CSSモーダル
モーダルは、現在のページの最上部に表示されるダイアログ・ボックス/ポップアップウィンドウです。
Aモーダルを作成する方法
例
<!-- 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-モーダル」クラス
モーダルは、 クラス= "W3峰」と（の<div>のような）任意のHTMLコンテナすることができます。
「W3-モーダルコンテンツ」クラス
すべてのモーダルコンテンツは、 クラス= "W3-モーダルコンテンツ」とHTMLコンテナに配置する必要があります。
モーダルコンテンツは、任意のHTML要素（見出し、段落、画像、等）することができます
モーダルを開きます。
モーダルを開くには、任意のHTML要素を使用します。 これは、多くの場合、ボタンまたはリンクです。
document.getElementById（）メソッドを使用して、モーダル（この例ではID01）のIDにonclick属性とポイントを追加し、「トリガー」ボタン（ID01）と一致する一意のIDを指定します。
モーダルを閉じます
モーダルを閉じるには、モーダル（ID01）のIDを指すのonclick属性と一緒要素にW3-はcloseBtnクラスを追加します。 あなたはまた、モーダルの外側をクリックして、それを閉じることができます（以下の例を参照）。
 | ＆回; （×）は、閉じるボタンのための好適なアイコンではなく、文字 "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";
}
}
»それを自分で試してみてください