Javascriptでモーダルウィンドウを生成する

JavaScriptを使ったモーダルウィンドウについての解説です。
実装例として、ボタンをクリックすることでモーダルウィンドウを呼び出す処理のサンプルを記載します。

HTML

ボタンをひとつ用意します。
要素を取得する為、id="modal-btn"とします。

<button id="modal-btn">ボタン</button>

CSS

生成するモーダルに付与するCSSを設定します。
中央配置にする為にleft: 50%、top: 50%、transform: translate(-50%, -50%)を設定しています。

.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.inner {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: solid 3px #dfe4ea;
  border-radius: 10px;
}

Javascript

はじめに作成したHTMLのボタンをクリックした時の処理を記述します。
クリックを起点としたイベントを設定し、showModalメソッドを発火させます。

document.getElementById('modal-btn').addEventListener('click', showModal);

showModalメソッドの詳細を記述します。

function showModal() {
    // モーダルウィンドウと中身の要素を生成・クラスを付与
    const modalElement = document.createElement('div');
    modalElement.classList.add('modal');
    const innerElement = document.createElement('div');
    innerElement.classList.add('inner');

　　 // モーダルウィンドウに表示する要素を記述
    innerElement.innerHTML = `
        <p>モーダルウィンドウ</p>
    `;

    // モーダルウィンドウに中身を配置
    modalElement.appendChild(innerElement);
    document.body.appendChild(modalElement);

    // 中身をクリックしたらモーダルウィンドウを閉じる
    innerElement.addEventListener('click', () => {
        closeModal(modalElement);
    });
}

モーダルを閉じる処理を用意します。

function closeModal(modalElement) {
    document.body.removeChild(modalElement);
}

これでシンプルなモーダルウィンドウが完成しました。

モーダルウィンドウの使いどころ

モーダルウィンドウは、Webサイトの様々な箇所で使われています。
画面を覆うように表示されるため、ユーザーへの警告や確認の為に使われることが多い機能です。

• ポップアップ広告
• 警告メッセージ
• エラーメッセージ
• ロード中

モーダルウィンドウを使ったポップアップ広告などはユーザーから嫌われる傾向にある為、使用には注意が必要です。