W3.CSSモーダル

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

W3.CSSモーダルクラス

W3.CSSは、モーダルウィンドウ用に次のクラスを提供します。

クラス	定義
w3-モーダル	モーダルコンテナ
w3-モーダルコンテンツ	モーダルコンテンツ

モーダルを作成する

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>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
    </div>
</div>
</div>

モーダルを開く

任意のHTML要素を使用してモーダルを開きます。ただし、これは多くの場合、ボタンまたはリンクです。

document.getElementById（）メソッドを使用して、 onclick属性を追加し、モーダルのID（この例ではid01 ）をポイントします。

モーダルを閉じる

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

ヒント：＆times; 文字「x」ではなく、閉じるアイコンに推奨されるHTMLエンティティです。

モーダルヘッダーとフッター

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>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-card- *クラスの1つをw3-modal-contentコンテナに追加します。

例

アニメーションモーダル

w3-animate-zoom | top | bottom | right | leftクラスのいずれかを使用して、特定の方向からモーダルにスライドします。

例

w3-modal要素で w3-animate-opacityクラスを設定することにより、モーダルの背景色をフェードインすることもできます。

例

モーダルイメージ

画像をクリックして、モーダルとしてフルサイズで表示します。

例

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

画像をクリックすると、フルサイズで表示されます。

例

<div class="w3-row-padding">
<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>

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

この例では、ログイン用のモーダルを作成します。

例

タブ付きコンテンツを使用したモーダル

この例では、タブ付きコンテンツを使用してモーダルを作成します。

例

Close the Modal

In the examples above, we use a button to close the modal. However, with a little bit of JavaScript, you can also close the modal when clicking outside of the modal box:

Example

// 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";
  }
}

Advanced: Lightbox (Modal Image Gallery)

This example shows how to add an image slideshow inside a modal, to create a "lightbox":

Example

Click on an image:

Tip: To learn more about slideshows, visit our W3.CSS Slideshow chapter.

❮ Previous Next ❯

W3.CSS

W3.CSSカラー

Web構築

例

参考文献

W3.CSSモーダル