dialogタグで作るモーダルウィンドウ。CSSアニメとiOS対策、アクセシビリティ配慮まで解説

<button type="button" class="demo-dialog-open js-dialog-open" data-dialog-target="demo-dialog">モーダル表示</button>

<dialog id="demo-dialog" aria-labelledby="demo-dialog-title-1">
    <div class="demo-dialog__inner js-dialog__inner">
        <h2 id="demo-dialog-title-1" class="demo-title">モーダル(dialog)</h2>
        <form method="dialog">
            <button type="submit" class="demo-dialog-close" aria-label="閉じる"></button>
        </form>

        <p>
            ここにテキストが入ります。
        </p>
    </div>
</dialog>

/* - 背景固定 */
body:has(dialog[open]) {
    overflow: hidden;
}

/* - タッチ操作の制御 */
.js-dialog-open {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* - 初回フォーカス位置の制御 */
.js-dialog__inner:focus {
    outline: none;
}

dialog {
    --transition-speed: .3s;
    --translate-position: 50px;

    /* - 装飾はinner側で行うため、dialog標準の余白・背景・枠線を消す */
    padding: 0;
    background: transparent;
    border: 0;

    opacity: 0;
    transform: translateY(var(--translate-position));
    transition:
        opacity var(--transition-speed),
        transform var(--transition-speed);
    overflow: visible;

    /* - open時の表示状態 */
    &[open] {
        opacity: 1;
        transform: translateY(0);
    }

    /* - 閉じる時はJSでclassを付け、dialogをopenのままフェードアウトさせる */
    &[open].is-closing {
        opacity: 0;
        transform: translateY(0);
    }

    /* - 背景レイヤーの初期状態 */
    &::backdrop {
        opacity: 0;
        background-color: transparent;
        backdrop-filter: blur(0);
        transition:
            opacity var(--transition-speed),
            background-color var(--transition-speed),
            backdrop-filter var(--transition-speed);
    }

    /* - open時の背景レイヤー */
    &[open]::backdrop {
        opacity: 1;
        background-color: rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(5px);
    }

    /* - 閉じる時の背景レイヤー */
    &[open].is-closing::backdrop {
        opacity: 0;
        background-color: transparent;
        backdrop-filter: blur(0);
    }

    /* - open時だけ、下からフェードインする開始状態を定義する */
    @starting-style {
        &[open] {
            opacity: 0;
            transform: translateY(var(--translate-position));
        }

        &[open]::backdrop {
            opacity: 0;
            background-color: transparent;
            backdrop-filter: blur(0);
        }
    }

    /* - モーダル本体の装飾 */
    .demo-dialog__inner {
        position: relative;
        max-width: 750px;
        padding: 2em;
        background: #fff;
        border: 3px solid #333;
        border-radius: 10px;
    }
}

body:has(dialog[open]) {
    overflow: hidden;
}

html {
    scrollbar-gutter: stable;
}

(function ($) {
    $(function () {

        function dialogOpen() {
            const trigger = $('.js-dialog-open');
            const innerSelector = '.js-dialog__inner';
            const closingClass = 'is-closing';
            const closeOnOverlay = true;
            const closeAnimationDuration = 300; // CSSの var(--transition-speed)の値と一致させる

            function closeDialog(dialog) {
                if (!dialog || !dialog.open || dialog.classList.contains(closingClass)) {
                    return;
                }

                // dialogをopen状態のまま維持し、閉じるアニメーション用classを付与する
                dialog.classList.add(closingClass);

                // アニメーション完了後にネイティブのclose()を実行し、状態を初期化する
                setTimeout(function () {
                    if (dialog.open) {
                        dialog.close();
                    }

                    dialog.classList.remove(closingClass);
                }, closeAnimationDuration);
            }

            // data-dialog-target に指定されたIDのdialogを開く
            trigger.on('click', function () {
                const targetId = $(this).attr('data-dialog-target');
                const dialog = document.getElementById(targetId);

                // 対象が存在しない場合、またはdialog未対応環境では何もしない
                if (!dialog || typeof dialog.showModal !== 'function') {
                    return;
                }

                dialog.classList.remove(closingClass);
                dialog.showModal();

                // フォーカスの制御
                const inner = dialog.querySelector(innerSelector);

                if (inner) {
                    inner.setAttribute('tabindex', '-1');

                    requestAnimationFrame(function () {
                        inner.focus({ preventScroll: true });
                    });
                }

            });

            $('dialog').each(function () {
                const dialog = this;

                // form method="dialog" の即時closeを止め、閉じるアニメーション経由にする
                $(dialog).find('form[method="dialog"]').on('submit', function (event) {
                    event.preventDefault();
                    closeDialog(dialog);
                });

                // Escキーによる即時closeを止め、閉じるアニメーション経由にする
                dialog.addEventListener('cancel', function (event) {
                    event.preventDefault();
                    closeDialog(dialog);
                });
            });

            // 背景クリックを無効にする場合は、ここで処理を終了する
            if (!closeOnOverlay) {
                return;
            }

            // dialog内のinner要素より外側をクリックした場合のみ閉じる
            $('dialog').on('click', function (event) {
                const inner = this.querySelector(innerSelector);

                if (!inner) {
                    return;
                }

                if (!inner.contains(event.target)) {
                    closeDialog(this);
                }
            });
        }
        dialogOpen();

    });
})(jQuery);