(Sample)

モーダルダイアログは、ユーザーの操作を一時的に中断して注意を引くために使われます。

ダイアログ要素を使用することでモーダルウィンドウを実装できるようになりました。

以前ご紹介したHTMLとCSSを使った方法よりも簡単だと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>モーダルウィンドウのサンプル</title>
    <style>
        /* ボディ全体のスタイル設定 */
        body {
            display: flex; /* フレックスボックスを使用 */
            justify-content: center; /* 中央揃え */
            align-items: center; /* 垂直方向に中央揃え */
            height: 100vh; /* 画面の高さを100%に設定 */
            background-color: #f0f0f0; /* 背景色を設定 */
            margin: 0; /* マージンをゼロに設定 */
        }
        /* ダイアログのスタイル設定 */
        dialog {
            background-color: #fff; /* 背景色を白に設定 */
            border: 1px solid #ccc; /* 枠線を設定 */
            border-radius: 5px; /* 角を丸くする */
            width: 50%; /* 幅を画面の50%に設定 */
            height: 70%; /* 高さを画面の70%に設定 */
            text-align: center; /* テキストを中央揃え */
            padding: 20px; /* 内側の余白を設定 */
            box-sizing: border-box; /* パディングを含めてサイズを計算 */
        }
        /* ダイアログの背景（バックドロップ）のスタイル設定 */
        dialog::backdrop {
            background-color: rgba(0, 0, 0, 0.5); /* 背景の暗さを設定 */
        }
        /* ボタンのスタイル設定 */
        button {
            padding: 10px 20px; /* ボタンの内側の余白を設定 */
            font-size: 16px; /* フォントサイズを設定 */
        }
        /* 画像のスタイル設定 */
        img {
            object-fit: cover; /* 画像をボックス内に収める */
            width: 100%; /* 幅を100%に設定 */
            height: auto; /* 画像のアスペクト比を維持する */
            max-height: 150px; /* 画像の高さを制限 */
        }
        /* 段落のスタイル設定 */
        p {
            margin: 10px 0; /* 上下のマージンを設定 */
        }
    </style>
</head>
<body>
    <!-- ダイアログを表示するボタン -->
    <button id="openDialogButton">ダイアログを表示する</button>
    <!-- モーダルダイアログ -->
    <dialog id="dialog">
        <h1>ダイアログ</h1>
        <p>
            <img src="https://picsum.photos/500" alt="Sample Image">
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
        </p>
        <!-- ダイアログを閉じるボタン -->
        <p><button id="closeDialogButton">閉じる</button></p>
    </dialog>
    <script>
        // ボタンとダイアログの要素を取得
        const openDialogButton = document.querySelector('#openDialogButton');
        const closeDialogButton = document.querySelector('#closeDialogButton');
        const dialog = document.querySelector('#dialog');

        // ダイアログを表示するためのイベントリスナーを追加
        openDialogButton.addEventListener('click', () => {
            dialog.showModal();
        });

        // ダイアログを閉じるためのイベントリスナーを追加
        closeDialogButton.addEventListener('click', () => {
            dialog.close();
        });
    </script>
</body>
</html>

Webアプリケーション制作のための小ネタ集　目次に戻る

モーダルウィンドウを作りたい　最後までお読みいただきありがとうございます。

研修のカリキュラムを見てみる