モーダル

モーダルのスクロール実装方法は2パターンあります。

モーダル内スクロール（dialogタグのデフォルト）: モーダル内スクロールとは、モーダルウィンドウが開いている間、背景ページのスクロールを無効化し、モーダル内のコンテンツのみがスクロール可能な状態のことです。
モーダル外スクロール: モーダル外スクロールとは、モーダルウィンドウが開いている状態でも、背景ページのスクロールが有効になっている状態のことです。

モーダル内スクロール

モーダル内スクロール（スクロールなし）

<button type="button" class="c-btn js-dialogOpenBtn" data-dialog="modal-1">モーダル内スクロール（スクロールなし）</button>
<dialog id="modal-1" class="c-modal" data-config="internal-scroll">
<div class="c-modal_contents">  <h5 class="c-heading-lv4 u-mb-sm">モーダル内スクロール（スクロールなし）</h5>
<p>モーダル内にコンテンツが少ない場合、コンテンツ量に応じて要素の大きさが変わります。</p>
<p><a class="c-link" href="">フォーカストラップ確認用リンク</a>／<a class="c-link" href="">フォーカストラップ確認用リンク</a>／<a class="c-link" href="">フォーカストラップ確認用リンク</a></p>  <button type="button" class="js-dialogCloseBtn c-modal_close-btn" aria-label="モーダルを閉じる">
<span class="icon_close"></span>
</button>
</div>
</dialog>

モーダル内スクロール（スクロールあり）

<button type="button" class="c-btn js-dialogOpenBtn" data-dialog="modal-2">モーダル内スクロール（スクロールあり）</button>
<dialog id="modal-2" class="c-modal" data-config="internal-scroll">
<div class="c-modal_contents">  <h5 class="c-heading-lv4 u-mb-sm">モーダル内スクロール（スクロールあり）</h5>
<p>モーダル内にコンテンツが多い場合、モーダル内でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル内でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル内でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル内でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル内でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル内でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル内でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル内でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル内でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル内でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル内でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル内でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル内でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル内でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル内でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル内でスクロールされます。</p>
<p><a class="c-link" href="">フォーカストラップ確認用リンク</a>／<a class="c-link" href="">フォーカストラップ確認用リンク</a>／<a class="c-link" href="">フォーカストラップ確認用リンク</a></p>  <button type="button" class="js-dialogCloseBtn c-modal_close-btn" aria-label="モーダルを閉じる">
<span class="icon_close"></span>
</button>
</div>
</dialog>

モーダル外スクロール

モーダル外スクロール（スクロールなし）

<button type="button" class="c-btn js-dialogOpenBtn" data-dialog="modal-3">モーダル外スクロール（スクロールなし）</button>
<dialog id="modal-3" class="c-modal" data-config="external-scroll">
<div class="c-modal_contents-wrap js-dialogOverlay">
<div class="c-modal_contents">  <h5 class="c-heading-lv4 u-mb-sm">モーダル外スクロール（スクロールなし）</h5>
<p>モーダル内にコンテンツが少ない場合、コンテンツ量に応じて要素の大きさが変わります。</p>
<p><a class="c-link" href="">フォーカストラップ確認用リンク</a>／<a class="c-link" href="">フォーカストラップ確認用リンク</a>／<a class="c-link" href="">フォーカストラップ確認用リンク</a></p>  <button type="button" class="js-dialogCloseBtn c-modal_close-btn" aria-label="モーダルを閉じる">
<span class="icon_close"></span>
</button>
</div>
</div>
</dialog>

モーダル外スクロール（スクロールあり）

<button type="button" class="c-btn js-dialogOpenBtn" data-dialog="modal-4">モーダル外スクロール（スクロールあり）</button>
<dialog id="modal-4" class="c-modal" data-config="external-scroll">
<div class="c-modal_contents-wrap js-dialogOverlay">
<div class="c-modal_contents">  <h5 class="c-heading-lv4 u-mb-sm">モーダル外スクロール（スクロールあり）</h5>
<p>モーダル内にコンテンツが多い場合、モーダル外でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル外でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル外でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル外でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル外でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル外でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル外でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル外でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル外でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル外でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル外でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル外でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル外でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル外でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル外でスクロールされます。</p>
<p>モーダル内にコンテンツが多い場合、モーダル外でスクロールされます。</p>
<p><a class="c-link" href="">フォーカストラップ確認用リンク</a>／<a class="c-link" href="">フォーカストラップ確認用リンク</a>／<a class="c-link" href="">フォーカストラップ確認用リンク</a></p>  <button type="button" class="js-dialogCloseBtn c-modal_close-btn" aria-label="モーダルを閉じる">
<span class="icon_close"></span>
</button>
</div>
</div>
</dialog>

ボタンとモーダル本体の紐づけ

一括指定・個別指定いずれの場合も、モーダルを開くボタンのdata-modal属性とモーダルのid属性を対応させる必要があります。

オプションの指定方法

オプションの一括指定

Dialog.initAll()メソッドで一括でオプションを指定できます。

Dialog.initAll({
  dialogSelector: "dialog",
  openTriggerSelector: ".js-dialogOpenBtn",
  closeTriggerSelector: ".js-dialogCloseBtn",
  overlayTargetSelector: ".js-dialogOverlay",
});

オプションの個別指定

個別のダイアログには、コンストラクタでオプションを指定します。

new Dialog({
  dialog: "#modal-5",
  openTrigger: "[data-modal='modal-5']",
  closeOnOverlayClick: false,
  closeOnEscape: false,
});

<button type="button" class="c-btn custom-modal-open" data-dialog="modal-5">オプション設定あり</button>
<dialog id="modal-5" class="c-modal" data-config="internal-scroll">
<div class="c-modal_contents">  <h5 class="c-heading-lv4 u-mb-sm">オプション設定あり</h5>
<p>このモーダルはオーバーレイクリックとESCキーでの閉じる機能を無効にしています。<br aria-hidden="true">閉じるボタンを押して閉じてください。</p>  <button type="button" class="js-dialogCloseBtn c-modal_close-btn" aria-label="モーダルを閉じる">
<span class="icon_close"></span>
</button>
</div>
</dialog>

オプション

オプション	概要
dialog	対象のダイアログ要素のセレクタを指定します。
openTrigger	モーダルを開くトリガー要素のセレクタを指定します。
closeTrigger	モーダルを閉じるトリガー要素のセレクタを指定します。
overlayTarget	オーバーレイクリックで閉じる対象要素のセレクタを指定します。
closeOnOverlayClick	オーバーレイクリックでモーダルを閉じるかどうかを指定します。
closeOnEscape	ESCキーでモーダルを閉じるかどうかを指定します。

dialog

dialog: string

対象となるダイアログ要素のセレクタを指定します。このオプションは必須です。

new Dialog({
  dialog: "#my-dialog",
  openTrigger: ".open-btn"
});

openTrigger

openTrigger: string

モーダルを開くトリガー要素のセレクタを指定します。このオプションは必須です。

new Dialog({
  dialog: "#my-dialog",
  openTrigger: ".custom-open-btn"
});

closeTrigger

closeTrigger?: string

モーダルを閉じるトリガー要素のセレクタを指定します。省略可能です。

new Dialog({
  dialog: "#my-dialog",
  openTrigger: ".open-btn",
  closeTrigger: ".custom-close-btn"
});

overlayTarget

overlayTarget?: string

オーバーレイクリックで閉じる対象要素のセレクタを指定します。モーダル外スクロールタイプで使用します。主にモーダル外スクロールを設定した際に使用します。

目的

確認ダイアログ（重要な操作の確認）で誤操作防止
フォーム入力途中で意図しない閉じるを防ぐ

new Dialog({
  dialog: "#my-dialog",
  openTrigger: ".open-btn",
  overlayTarget: ".dialog-overlay"
});

closeOnOverlayClick

closeOnOverlayClick: boolean = true

オーバーレイ（背景）をクリックした時にモーダルを閉じるかどうかを指定します。

目的

確認ダイアログ（重要な操作の確認）で誤操作防止
フォーム入力途中で意図しない閉じるを防ぐ

new Dialog({
  dialog: "#modal-6",
  openTrigger: "[data-modal='modal-6']",
  closeOnOverlayClick: false
});

<button type="button" class="c-btn custom-modal-open-6" data-dialog="modal-6">オーバーレイクリック無効</button>
<dialog id="modal-6" class="c-modal" data-config="internal-scroll">
<div class="c-modal_contents">  <h5 class="c-heading-lv4 u-mb-sm">オーバーレイクリック無効</h5>
<p>このモーダルはオーバーレイをクリックしても閉じません。閉じるボタンまたはESCキーで閉じてください。</p>  <button type="button" class="js-dialogCloseBtn c-modal_close-btn" aria-label="モーダルを閉じる">
<span class="icon_close"></span>
</button>
</div>
</dialog>

closeOnEscape

closeOnEscape: boolean = true

ESCキーを押した時にモーダルを閉じるかどうかを指定します。

目的

確認ダイアログ（重要な操作の確認）で誤操作防止
フォーム入力途中で意図しない閉じるを防ぐ

new Dialog({
  dialog: "#modal-7",
  openTrigger: "[data-modal='modal-7']",
  closeOnEscape: false
});

<button type="button" class="c-btn custom-modal-open-7" data-dialog="modal-7">ESCキー無効</button>
<dialog id="modal-7" class="c-modal" data-config="internal-scroll">
<div class="c-modal_contents">  <h5 class="c-heading-lv4 u-mb-sm">ESCキー無効</h5>
<p>このモーダルはESCキーを押しても閉じません。閉じるボタンまたはオーバーレイクリックで閉じてください。</p>  <button type="button" class="js-dialogCloseBtn c-modal_close-btn" aria-label="モーダルを閉じる">
<span class="icon_close"></span>
</button>
</div>
</dialog>

モーダルの満たすべき仕様

表示・非表示制御

開閉状態の管理（表示/非表示の切り替え）
プログラムによる開閉制御
開閉時のスクロールバーかくつき防止
背景スクロールの無効化
背景スクロールの無効化時、背景スクロール位置の保持（position: fixed; での実装は背景スクロール位置をリセットしてしまうため注意が必要）
背景オーバーレイ（通常は半透明の暗い背景）

ユーザビリティ・アクセシビリティ

Escキーで閉じる機能
背景クリックで閉じる機能（オプション）
フォーカストラップ（モーダル外への移動防止）
開いた時の初期フォーカス設定
ARIA属性の実装（role="dialog", aria-labelledby, aria-describedby）
スクリーンリーダー対応