モーダルは、現在のページの最上部に表示されるダイアログ・ボックス/ポップアップウィンドウです：

モーダルの作成方法

例

<button onclick="document.getElementById('id01').style.display='block'"
class="w3-btn">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-closebtn">×</span>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
    </div>
</div>
</div>

Try It Yourself ❯

class="w3-modal" を持つ全ての HTML コンテナ (例えば <div>) をモーダルにすることができます。

すべてのモーダル・コンテンツは、class="w3-modal-content" を持つ HTML コンテナに配置する必要があります。

モーダル・コンテンツは、全ての HTML 要素 (heading、paragraph、image、等) することができます。

モーダルを開くには、全ての HTML 要素を使用できますが、大抵はボタンまたはリンクを使用します。

onclick 属性を追加し、document.getElementById() メソッドを使用してモーダル id （この例では id01）をポイントして、"trigger" ボタンに一致するユニークな ID（id01）を指定します。

モーダルを閉じるには、モーダルの id （id01）を指す onclick 属性を持つ要素と一緒に w3-closebtn クラスを追加します。モーダルの外側をクリックしても閉じることができます（下の例を参照）

× (×) は、文字 "x" よりも閉じるボタンに適したアイコンの HTML エンティティです。

モーダルのヘッダー & フッター

class="w3-modal-content" を持つ <div> 内で、モーダルに異なったセクションを作るためには 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-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>

Try It Yourself ❯

カードのようなモーダル

カードのようなモーダルを表示するには、w3-modal-content コンテナに w3-card-* クラスを追加します：

アニメ付きモーダルs

指定の方向からモーダルへスライドインさせるために、w3-animate-zoom|top|bottom|right|left クラスのいずれかを使用します：

例

Try It Yourself ❯

また、モーダルの背景色をフェードインすることもできます（w3-modal）：

モーダル画像

例

Try It Yourself ❯

モーダル・イメージ・ギャラリー

例

<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>

Try It Yourself ❯

モーダル・ログイン・フォーム

モーダル・タブ

この例では、タブ付きコンテンツを持つモーダルを作成します：

モーダルを閉じる

上の例では、モーダルを閉じるためにボタンを使用しています。しかし、わずかな 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";
  }
}

Try It Yourself ❯

高度：ライトボックスモーダル

この例では、"lightbox" を作成するために、モーダル内の画像のスライドショーを使用する方法を示しています：

チップ: スライドショーの詳細については、W3.CSS スライドショーの章をご覧ください。

W3.CSS モーダル