Bulma modal クラス

Bulma CSSフレームワークを使って、モーダル・ウィンドウを表示したり、画像をモーダル表示するには、modal クラスを使います。modal クラスの使い方をサンプルを交えてご紹介します。

Bulma を使ってモーダル・ウィンドウを表示するには、以下に示すクラスを指定する。

クラス	説明
modal	メイン・コンテナ
modal-background	モーダルを閉じるためのクリック対象として機能する透明なオーバーレイ
modal-content	最大幅640pxの水平および垂直方向にセンタリングされたコンテナで、この中に任意のコンテンツを含めることができる。
modal-close	右上にあるシンプルな×印
is-active	アクティブなモーダル

モーダルを有効にするには、.modal コンテナに .is-active クラスを追加する。モーダルを無効にするには、.modal コンテナから is-active クラスを削除する。is-active 属性を追加または削除する JavaScript を Bulma は提供していないため、カスタム・スクリプトとして実装する必要がある。

<!-- 非表示状態のモーダル -->
<div class="modal">
</div>

<!-- 表示状態のモーダル -->
<div class="modal is-active">
</div>

Bulma CSS フレームワークを使って、モーダル・ダイアログを表示する例を次に示す。

<button class="button is-primary js-modal-trigger" data-target="modal1"">開く</button>

<div class="modal" id="modal1">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="has-background-white p-4">
      <p>モーダルのサンプルです。</p>
      <p>右上の×印またはモーダル以外の部分をクリックすると、モーダルを閉じます。</p>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

<script>
  function openModal($el) {
    $el.classList.add('is-active');
  }
  function closeModal($el) {
    $el.classList.remove('is-active');
  }
  (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
    const modal = $trigger.dataset.target;
    const $target = document.getElementById(modal);
    $trigger.addEventListener('click', () => {
      openModal($target);
    });
  });
  (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
    const $target = $close.closest('.modal');
    $close.addEventListener('click', () => {
      closeModal($target);
    });
  });
</script>

Bulma を使って画像をモーダル表示するには、以下に示すクラスを指定する。

クラス	説明
image	画像
is-1by1	アスペクト比（幅:高さ）1:1
is-1by2	アスペクト比（幅:高さ）1:2
is-1by3	アスペクト比（幅:高さ）1:2
is-2by1	アスペクト比（幅:高さ）2:1
is-2by3	アスペクト比（幅:高さ）2:3
is-3by1	アスペクト比（幅:高さ）3:1
is-3by2	アスペクト比（幅:高さ）3:2
is-3by4	アスペクト比（幅:高さ）3:4
is-3by5	アスペクト比（幅:高さ）3:5
is-4by3	アスペクト比（幅:高さ）4:3
is-4by5	アスペクト比（幅:高さ）4:5
is-5by3	アスペクト比（幅:高さ）5:3
is-5by4	アスペクト比（幅:高さ）5:4
is-16by9	アスペクト比（幅:高さ）16:9
is-square	正方形

<button class="button is-primary js-modal-trigger" data-target="modal2">開く</button>

<div class="modal" id="modal2">
  <div class="modal-background"></div>
  <div class="modal-content">
    <p class="image is-1by1">
      <img src="portrait.png" alt="portrait">
    </p>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

<script>
  function openModal($el) {
    $el.classList.add('is-active');
  }
  function closeModal($el) {
    $el.classList.remove('is-active');
  }
  (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
    const modal = $trigger.dataset.target;
    const $target = document.getElementById(modal);
    $trigger.addEventListener('click', () => {
      openModal($target);
    });
  });
  (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
    const $target = $close.closest('.modal');
    $close.addEventListener('click', () => {
      closeModal($target);
    });
  });
</script>

ヘッダー、ボディおよびフッターがある、よりクラシックなモーダルが必要な場合は、モーダルカードを使用する。

クラス	説明
modal-card	モーダルカードのコンテナ
modal-card-head	モーダルカードのヘッダー
modal-card-body	モーダルカードのボディ
modal-card-foot	モーダルカードのフッター

<button class="button is-primary js-modal-trigger" data-target="modal3">開く</button>

<div class="modal" id="modal3">
  <div class="modal-background"></div>
  <div class="modal-card"">
    <header class="modal-card-head">
      <p class="modal-card-title">タイトル</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      <p>モーダルカードのサンプルです。</p>
      <p>右上の×印、フッターのOKボタンまたはモーダル以外の部分をクリックすると、モーダルカードを閉じます。</p>
    </section>
    <footer class="modal-card-foot">
      <button class="button" aria-label="close">OK</button>
    </footer>
  </div>
</div>

<script>
  function openModal($el) {
    $el.classList.add('is-active');
  }
  function closeModal($el) {
    $el.classList.remove('is-active');
  }
  (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
    const modal = $trigger.dataset.target;
    const $target = document.getElementById(modal);
    $trigger.addEventListener('click', () => {
      openModal($target);
    });
  });
  (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
    const $target = $close.closest('.modal');
    $close.addEventListener('click', () => {
      closeModal($target);
    });
  });
</script>

参考文献

Thomas, Jeremy. (2021) Documentation | Bulma

Bulma modal クラス

.modal

.image

.modal-card

参考文献