モーダルダイアログ

モーダルダイアログ（ダイアログボックス）

モーダルダイアログ（ダイアログボックス）のコンポーネントにはsu-modal、ならびにsu-modal-headerとsu-modal-content、su-modal-footerのクラス名を使用します。

あわせて、data-su-jsのカスタムデータ属性をモーダル要素とモーダル表示のトリガー要素に対してそれぞれ設定します。モーダル要素にはdata-su-js="su-modal"の属性値を、モーダル表示のトリガー要素にはdata-su-js="su-modal-open"の属性値を、モーダルを閉じるトリガー要素にはdata-su-js="su-modal-close"の属性値を追加します。

dialog要素を用いてマークアップします。モーダル表示のトリガー要素やモーダル内のコンテンツは文脈に応じて適切にマークアップします。上記クラス名を付与することでスタイルが適用されます。モーダル要素内のダイアログボックスやオーバーレイ要素などがスタイリングされます。

モーダルの状態でダイアログボックスを表示します。ダイアログボックス内にはモーダルを閉じるボタンやコンテンツ表示領域などが適切にレイアウトされ、背景のオーバーレイ要素もモーダルの状態であることがわかるようにスタイルが適用されます。

※このコンポーネントはJavaScriptを使ってダイアログボックスの切り替えを行う設計になっています。
※モーダル背面にあるオーバーレイ要素をエリアをクリックしても、モーダルが閉じる設計になっています。

<!-- モーダル表示のトリガー要素 -->
<button 
  type="button" 
  data-su-js="su-modal-open"
  aria-controls="modal" 
  aria-expanded="false"
>
  クリックもしくはタップでモーダルダイアログを表示
</button>

<!-- モーダル要素 -->
<dialog 
  class="su-modal" 
  data-su-js="su-modal"
  role="dialog" 
  aria-labelledby="modal-title"
  aria-modal="true"
>
  <div 
    class="su-modal-header"
    id="modal-title"
  >
    モーダルタイトル
  </div>
  <div class="su-modal-content">モーダルコンテンツ</div>
  <div class="su-modal-footer">
    <button 
      type="button" 
      data-su-js="su-modal-close"
      aria-label="モーダルを閉じる"
    >
      閉じる
    </button>
  </div>
</dialog>

モーダルの角丸サイズやコンテンツエリア区切り線の色、ビューポート境界との余白サイズ、また、背面オーバーレイ要素の色やブラーサイズはCSS変数を使って変更することが可能です。

.su-modal {
  --su-color-bg-modal-overlay: rgba(255, 0, 0, 0.5);
  --su-size-blur-modal-overlay: 10px;
  --su-size-radius-modal: 20px;
  --su-size-space-outside-modal: 50px;
  --su-color-separator-modal: blue;
}

フルスクリーン表示

ビューポート領域全体に広がるモーダルダイアログを表示させる場合には、dialog要素に対して、su-modal-fullのクラス名を追加します。ダイアログ要素がフルスクリーンのサイズで表示します。

<!-- フルスクリーンモーダル表示のトリガー要素 -->
<button 
  type="button" 
  data-su-js="su-modal-open"
  aria-controls="modal" 
  aria-expanded="false"
>
  クリックもしくはタップでモーダルダイアログを表示
</button>

<!-- フルスクリーンモーダル要素 -->
<dialog 
  class="su-modal su-modal-full" 
  data-su-js="su-modal"
  role="dialog" 
  aria-labelledby="modal-title"
  aria-modal="true"
>
  <div 
    class="su-modal-header"
    id="modal-title"
  >
    モーダルタイトル
  </div>
  <div class="su-modal-content">モーダルコンテンツ</div>
  <div class="su-modal-footer">
    <button 
      type="button" 
      data-su-js="su-modal-close"
      aria-label="モーダルを閉じる"
    >
      閉じる
    </button>
  </div>
</dialog>

複数モーダルの設置

同一ページ内で複数のモーダルを使用する場合には、それぞれのモーダルを構成する各要素に対して、ユニークなdata-su-jsのカスタムデータ属性値を設定し紐付けしていきます。モーダルダイアログの開閉処理はスクリプト側で専用のクラスからインスタンスを作成し、設定したカスタムデータ属性値を指定します。

// スクリプトファイルをインポート（NPMインストールの場合）
import '@designsupply/startify-ui';

// モーダルごとにインスタンスを作成し、ユニークなカスタムデータ属性を指定
new Modal({
  dataNameModal: 'su-modal-1',
  dataNameModalOpen: 'su-modal-open-1',
  dataNameModalClose: 'su-modal-close-1',
});
new Modal({
  dataNameModal: 'su-modal-2',
  dataNameModalOpen: 'su-modal-open-2',
  dataNameModalClose: 'su-modal-close-2',
});

HTML側では、スクリプト側で指定したカスタムデータ属性を、対応する各モーダル構成要素に対して設定していきます。

<!-- モーダル1 -->
<button type="button" data-su-js="su-modal-open-1" ...>
  モーダル1を表示
</button>
<dialog class="su-modal" data-su-js="su-modal-1" ...>
  ...
  <div class="su-modal-footer">
    <button type="button" data-su-js="su-modal-close-1" ...>
      モーダル1を閉じる
    </button>
  </div>
</dialog>

<!-- モーダル2 -->
<button type="button" data-su-js="su-modal-open-2" ...>
  モーダル2を表示
</button>
<dialog class="su-modal" data-su-js="su-modal-2" ...>
  ...
  <div class="su-modal-footer">
    <button type="button" data-su-js="su-modal-close-2" ...>
      モーダル2を閉じる
    </button>
  </div>
</dialog>

アクセシビリティの支援

モーダルダイアログのコンポーネントではアクセシビリティの対応として、dialog要素に対して、aria-modal="true"やrole="modal"の属性値を指定することで、スクリーンリーダーに対して、モーダルダイアログであることを伝えます。そして、モーダルダイアログのタイトル要素をaria-labelledby属性を指定し、モーダルダイアログ要素と紐づけるようにすることで、スクリーンリーダーがモーダルダイアログの内容を理解できるようにします。また、モーダルを閉じるトリガー要素にもaria-label属性を設定し、スクリーンリーダーが読み上げられるようにします。

また、モーダルを表示させるトリガー要素には、aria-controls="modal"の属性値を設定することで、操作する対象がモーダルであることを明示させます。合わせて、aria-expanded属性を用いて、モーダルの開閉状態をスクリーンリーダーに伝えるようにします。この属性値は動的に切り替える必要がありますが、Startify-UIで提供されているスクリプトにはこの処理が組み込まれています。（スクリプトの読み込みが必須となります）

// モーダル表示のトリガー要素
<button 
  type="button" 
  data-su-js="su-modal-open"
  aria-controls="modal" 
  aria-expanded="false" // モーダルの開閉状態に合わせて動的に切り替え
>
  クリックもしくはタップでモーダルダイアログを表示
</button>

// モーダル要素
<dialog 
  class="su-modal" 
  data-su-js="su-modal"
  role="dialog" 
  aria-labelledby="modal-title"
  aria-modal="true"
>
  <div 
    class="su-modal-header"
    id="modal-title" // id属性でaria-labelledby属性値と紐づける
  >
    モーダルタイトル
  </div>
  <div class="su-modal-content">モーダルコンテンツ</div>
  <div class="su-modal-footer">
    <button 
      type="button" 
      data-su-js="su-modal-close"
      aria-label="モーダルを閉じる"
    >
      閉じる
    </button>
  </div>
</dialog>