読み込み中...

JavaScriptのdialogを用いたダイアログの作成手順10選

JavaScriptのdialog要素を使ったダイアログ作成の手順 JS
この記事は約33分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●dialogタグとは？

Webアプリケーションを開発していると、ユーザーに情報を伝えたり、入力を促したりするためにダイアログを表示する場面がよくあります。

HTMLには、このようなダイアログを簡単に実装するための<dialog>タグが用意されています。

<dialog>タグは、ブラウザにネイティブなダイアログを表示するための要素です。

開発者は<dialog>を使って、モーダルウィンドウやポップアップボックスを作成することができます。

○dialogの基本構造

<dialog>タグの基本的な構造は非常にシンプルです。

次のように、<dialog>タグで囲んだ内容がダイアログとして表示されます。

<dialog>
  <p>これはシンプルなダイアログです。</p>
</dialog>

ただし、このままでは<dialog>はページ上に表示されません。

JavaScriptを使って表示・非表示を切り替える必要があります。

○サンプルコード1：シンプルなダイアログ

では早速、<dialog>を使ったシンプルなダイアログを実装してみましょう。

<button id="openDialog">ダイアログを開く</button>

<dialog id="myDialog">
  <p>これはシンプルなダイアログです。</p>
  <button id="closeDialog">閉じる</button>
</dialog>

<script>
  const openButton = document.getElementById('openDialog');
  const closeButton = document.getElementById('closeDialog');
  const dialog = document.getElementById('myDialog');

  openButton.addEventListener('click', () => {
    dialog.showModal();
  });

  closeButton.addEventListener('click', () => {
    dialog.close();
  });
</script>

このコードでは、”ダイアログを開く”ボタンをクリックするとdialog.showModal()が呼び出され、ダイアログが表示されます。

ダイアログ内の”閉じる”ボタンをクリックするとdialog.close()が呼び出され、ダイアログが閉じます。

実行結果として、”ダイアログを開く”ボタンをクリックすると、ダイアログボックスがページの中央に表示されます。

ダイアログ内の”閉じる”ボタンをクリックすると、ダイアログが閉じられます。

このようにJavaScriptのshowModal()とclose()メソッドを使うことで、<dialog>の表示・非表示を切り替えることができます。

○dialogの属性

<dialog>タグには便利な属性が複数存在します。

よく使われるのはopen属性です。

<dialog open>
  <p>ページ読み込み時に表示されるダイアログ</p>
</dialog>

open属性を指定すると、ページ読み込み時にダイアログが自動的に表示されます。

ユーザーに重要なお知らせを伝える際などに便利です。

●dialogを開閉する方法

さて、dialogタグの基本的な使い方は理解できましたね。

しかし、実際にダイアログを表示したり閉じたりするには、JavaScriptの力を借りる必要があります。

dialogの開閉にはいくつかの方法がありますので、一緒に見ていきましょう。

ダイアログを開く最も一般的な方法は、showModal()メソッドを使うことです。

このメソッドを呼び出すと、ダイアログがモーダルモードで表示されます。

モーダルモードでは、ダイアログ以外の部分をクリックしてもダイアログは閉じません。

ユーザーの注意をダイアログに集中させたい場合に適しています。

一方、show()メソッドを使うと、モードレスダイアログを表示できます。

モードレスダイアログは、ダイアログ以外の部分をクリックすると自動的に閉じられます。

ユーザーにあまり邪魔をかけずに情報を伝えたい場合に便利です。

○サンプルコード2：ボタンクリックでダイアログを表示

では実際に、ボタンクリックでダイアログを表示するサンプルコードを見てみましょう。

<button id="openButton">ダイアログを開く</button>

<dialog id="myDialog">
  <p>これはモーダルダイアログです。</p>
  <button id="closeButton">閉じる</button>
</dialog>

<script>
  const openButton = document.getElementById('openButton');
  const dialog = document.getElementById('myDialog');

  openButton.addEventListener('click', () => {
    dialog.showModal();
  });
</script>

実行結果として、”ダイアログを開く”ボタンをクリックすると、dialogがモーダルモードで表示されます。

ダイアログ以外の部分をクリックしてもダイアログは閉じません。

このコードでは、showModal()メソッドを使ってダイアログをモーダルモードで表示しています。

show()に変更すれば、モードレスダイアログとして表示することもできます。

○サンプルコード3：ダイアログを閉じるボタンの実装

ダイアログを開くことができても、閉じる方法がなければ困ってしまいますよね。

close()メソッドを使えば、ダイアログを簡単に閉じることができます。

先ほどのサンプルコードに、ダイアログを閉じるボタンを追加してみましょう。

<button id="openButton">ダイアログを開く</button>

<dialog id="myDialog">
  <p>これはモーダルダイアログです。</p>
  <button id="closeButton">閉じる</button>
</dialog>

<script>
  const openButton = document.getElementById('openButton');
  const closeButton = document.getElementById('closeButton');
  const dialog = document.getElementById('myDialog');

  openButton.addEventListener('click', () => {
    dialog.showModal();
  });

  closeButton.addEventListener('click', () => {
    dialog.close();
  });
</script>

実行結果として、”ダイアログを開く”ボタンをクリックするとダイアログが表示され、ダイアログ内の”閉じる”ボタンをクリックすることでダイアログが閉じられます。

ダイアログ内に閉じるボタンを配置し、そのボタンクリックイベントでclose()メソッドを呼び出すだけです。

これでユーザーはダイアログを開閉できるようになりました。

○サンプルコード4：バックドロップクリックで閉じる

ダイアログ内に閉じるボタンを置くのは定番の方法ですが、時にはダイアログ外の部分（バックドロップ）をクリックしても閉じられると便利です。

少し変わった方法ですが、<dialog>要素の::backdrop疑似要素を使うと実現できます。

::backdropはダイアログの背後に表示される領域を表します。

<button id="openButton">ダイアログを開く</button>

<dialog id="myDialog">
  <p>バックドロップクリックで閉じられるダイアログです。</p>
</dialog>

<script>
  const openButton = document.getElementById('openButton');
  const dialog = document.getElementById('myDialog');

  openButton.addEventListener('click', () => {
    dialog.showModal();
  });

  dialog.addEventListener('click', (event) => {
    if (event.target === dialog) {
      dialog.close();
    }
  });
</script>

<style>
  dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
  }
</style>

実行結果として、”ダイアログを開く”ボタンをクリックすると、背景が暗転したダイアログが表示されます。

ダイアログ外の部分（バックドロップ）をクリックすると、ダイアログが閉じます。

このサンプルコードでは、<dialog>要素自体にクリックイベントを追加しています。

クリックされた対象が<dialog>要素自身であれば（バックドロップがクリックされたら）、ダイアログを閉じるようにしています。

また、CSSの::backdrop疑似要素を使って、バックドロップの背景色を半透明の黒に設定しています

●モーダルダイアログの作成

ダイアログの開閉方法が理解できたところで、今度はモーダルダイアログの作成に挑戦してみましょう。

モーダルダイアログとは、ユーザーの操作を制限し、ダイアログ以外の部分をクリックできないようにするダイアログのことです。

重要な確認事項を表示したり、ユーザーに集中して入力してもらいたい場面で使われます。

dialogタグを使えば、モーダルダイアログの作成はとてもシンプルです。

showModal()メソッドを使ってダイアログを表示するだけで、自動的にモーダルモードになります。

○サンプルコード5：モーダルダイアログの基本

まずは、基本的なモーダルダイアログのサンプルコードを見てみましょう。

<button id="openButton">モーダルダイアログを開く</button>

<dialog id="myDialog">
  <p>これはモーダルダイアログです。</p>
  <button id="closeButton">閉じる</button>
</dialog>

<script>
  const openButton = document.getElementById('openButton');
  const closeButton = document.getElementById('closeButton');
  const dialog = document.getElementById('myDialog');

  openButton.addEventListener('click', () => {
    dialog.showModal();
  });

  closeButton.addEventListener('click', () => {
    dialog.close();
  });
</script>

実行結果として、”モーダルダイアログを開く”ボタンをクリックすると、モーダルダイアログが表示されます。

ダイアログ以外の部分はクリックできなくなり、ダイアログに集中できます。”閉じる”ボタンをクリックするとダイアログが閉じられます。

先ほどのサンプルコードとの違いは、showModal()メソッドを使っている点だけです。

これだけでモーダルダイアログが実現できるのは、dialogタグの魅力の一つですね。

○サンプルコード6：モーダルのオーバーレイ表示

モーダルダイアログを表示すると、自動的にオーバーレイ（背景の暗転）が適用されます。

このオーバーレイは、::backdrop疑似要素を使ってカスタマイズできます。

<button id="openButton">モーダルダイアログを開く</button>

<dialog id="myDialog">
  <p>背景がぼかされたモーダルダイアログです。</p>
  <button id="closeButton">閉じる</button>
</dialog>

<script>
  const openButton = document.getElementById('openButton');
  const closeButton = document.getElementById('closeButton');
  const dialog = document.getElementById('myDialog');

  openButton.addEventListener('click', () => {
    dialog.showModal();
  });

  closeButton.addEventListener('click', () => {
    dialog.close();
  });
</script>

<style>
  dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
  }
</style>

実行結果として、”モーダルダイアログを開く”ボタンをクリックすると、背景がぼかされたモーダルダイアログが表示されます。ダイアログ以外の部分はクリックできません。

“閉じる”ボタンをクリックするとダイアログが閉じられます。

このサンプルコードでは、CSSの::backdrop疑似要素を使って、オーバーレイの背景色を半透明の黒に設定し、さらにbackdrop-filterプロパティでぼかし効果を適用しています。

これにより、よりスタイリッシュなモーダルダイアログを実現できます。

○サンプルコード7：モーダルのアニメーション

モーダルダイアログの表示をアニメーションで演出すれば、よりリッチな印象を与えられます。

dialogタグにCSSアニメーションを適用することで、簡単にアニメーションを追加できます。

<button id="openButton">アニメーション付きモーダルを開く</button>

<dialog id="myDialog">
  <p>アニメーション付きのモーダルダイアログです。</p>
  <button id="closeButton">閉じる</button>
</dialog>

<script>
  const openButton = document.getElementById('openButton');
  const closeButton = document.getElementById('closeButton');
  const dialog = document.getElementById('myDialog');

  openButton.addEventListener('click', () => {
    dialog.showModal();
  });

  closeButton.addEventListener('click', () => {
    dialog.close();
  });
</script>

<style>
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  dialog {
    animation: fadeIn 0.3s ease;
  }
</style>

実行結果として、”アニメーション付きモーダルを開く”ボタンをクリックすると、フェードインアニメーションとともにモーダルダイアログが表示されます。

“閉じる”ボタンをクリックするとダイアログが閉じられます。

このサンプルコードでは、CSSの@keyframesルールを使ってフェードインアニメーションを定義し、dialogタグに適用しています。

opacityとtransformプロパティを組み合わせることで、ダイアログが徐々に表示されながら上からスライドインするような効果を実現しています。

●dialogのスタイリング

dialogの機能面については理解が深まってきましたね。

でも、見た目も大切な要素です。

dialogのデフォルトスタイルは少し物足りなく感じるかもしれません。

そこで、CSSを使えば、ダイアログを自分好みのデザインにカスタマイズできます。

dialogタグには、普通のHTMLタグと同じようにCSSを適用できます。

それもそのはず、dialogタグはHTMLの一部です。

セレクターを使ってスタイルを指定するだけです。

たとえば、ダイアログのボーダーを変更したいなら、こんなCSSを書けばOKです。

dialog {
  border: 2px solid #ff0000;
}

こんな風に、dialogタグのスタイルは自由自在です。

○サンプルコード8：ダイアログのデザイン変更

じゃあ、実際にダイアログのデザインを変えてみましょう。

背景色、文字色、ボーダー、角丸などをつけてみます。

<button id="openButton">ダイアログを開く</button>

<dialog id="myDialog">
  <p>スタイリングされたダイアログです。</p>
  <button id="closeButton">閉じる</button>
</dialog>

<script>
  const openButton = document.getElementById('openButton');
  const closeButton = document.getElementById('closeButton');
  const dialog = document.getElementById('myDialog');

  openButton.addEventListener('click', () => {
    dialog.showModal();
  });

  closeButton.addEventListener('click', () => {
    dialog.close();
  });
</script>

<style>
  dialog {
    background-color: #f0f8ff;
    color: #1e90ff;
    border: 2px solid #1e90ff;
    border-radius: 10px;
    padding: 20px;
  }
</style>

実行結果として、”ダイアログを開く”ボタンをクリックすると、薄い青の背景に濃い青の文字とボーダー、そして角丸のダイアログが現れます。

内容は中央揃えで、上下左右にほどよい余白もあって見やすくなりました。

○サンプルコード9：バックドロップのぼかし効果

ダイアログだけじゃなく、バックドロップ（背景の暗くなる部分）もオシャレにできます。

ぼかし効果を加えて、よりスタイリッシュな雰囲気を出してみましょう。

<button id="openButton">ダイアログを開く</button>

<dialog id="myDialog">
  <p>背景がぼかされたダイアログです。</p>
  <button id="closeButton">閉じる</button>
</dialog>

<script>
  const openButton = document.getElementById('openButton');
  const closeButton = document.getElementById('closeButton');
  const dialog = document.getElementById('myDialog');

  openButton.addEventListener('click', () => {
    dialog.showModal();
  });

  closeButton.addEventListener('click', () => {
    dialog.close();
  });
</script>

<style>
  dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
  }
</style>

実行結果としては、”ダイアログを開く”ボタンをクリックすると、ダイアログが開き、後ろの背景が半透明の黒でぼかされます。

ダイアログの内容が引き立って、よりクールな印象になりました。

::backdrop疑似要素を使えば、バックドロップのスタイルも自由自在。

ダイアログの後ろに表示される領域だから、そこにCSSを適用すればいいです。

background-colorで背景を半透明の黒にして、backdrop-filterでぼかしをかけてみました。

ダイアログ本体もバックドロップも、両方カッコよくしてこそ、最高のダイアログに仕上がるんですよね。

○CSSでダイアログを中央に配置する

最後に、ダイアログを画面のド真ん中に配置する方法をお教えします。

positionとtransformの合わせ技で、よくやるテクニックです。

<button id="openButton">ダイアログを開く</button>

<dialog id="myDialog">
  <p>中央に配置されたダイアログです。</p>
  <button id="closeButton">閉じる</button>
</dialog>

<script>
  const openButton = document.getElementById('openButton');
  const closeButton = document.getElementById('closeButton');
  const dialog = document.getElementById('myDialog');

  openButton.addEventListener('click', () => {
    dialog.showModal();
  });

  closeButton.addEventListener('click', () => {
    dialog.close();
  });
</script>

<style>
  dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

実行結果として、”ダイアログを開く”ボタンをクリックすると、ダイアログが画面の真ん中にドンと現れます。

ウィンドウの大きさを変えても、常にど真ん中をキープし続けます。

これはpositionとtransformのコンビネーションのおかげ。

まずposition: fixed;で、ダイアログの位置を画面を基準にします。

そしてtop: 50%; left: 50%;で、上から50%、左から50%の位置に動かします。

でもこれだと、ダイアログの左上が中央に来ちゃうんですよね。

だから最後にtransform: translate(-50%, -50%);で、ダイアログの幅と高さの半分だけ左上にずらす。

こうすることで、ダイアログが完璧に中央に収まるわけです。

●よくあるエラーと対処法

dialogを使っていると、思うようにダイアログが表示されなかったり、ブラウザによって動作が違ったりと、いろいろ悩みのタネがありますよね。

ただ問題はありません。

そんな時の対処法を一緒に見ていきましょう。

dialogを使いこなすには、ちょっとしたコツが必要です。

よくある落とし穴を知っておけば、スムーズにダイアログを実装できるはず。実務でdialogを活用する際の参考にしてくださいね。

○dialogが表示されない場合の確認事項

dialogを表示しようとしても、何も表示されないことがあります。

dialogが正しく動作しない原因はいくつかありますが、よくあるのはHTMLの構造の問題です。

たとえば、dialogタグが別のタグの中に入れ子になっていると、正常に機能しないことがあります。

dialogタグは独立したタグとして配置するのがベストです。

<!-- NG: dialogが別のタグに入れ子になっている -->
<div>
  <dialog>
    <p>このダイアログは表示されない可能性が高いです。</p>
  </dialog>
</div>

<!-- OK: dialogが独立したタグとして配置されている -->
<dialog>
  <p>このダイアログは正しく表示されるはずです。</p>
</dialog>

【結論】dialogが表示されない場合は、まずHTMLの構造をチェックしてみましょう。

dialogタグが独立していることを確認するのが大切です。

○ブラウザ互換性の問題と対応策

dialogの表示や動作がブラウザによって異なることがあります。

dialogタグはまだ比較的新しい機能で、すべてのブラウザが完全にサポートしているわけではないからです。

たとえば、古いバージョンのSafariではdialogがサポートされていません。

そのようなブラウザでは、dialogを使ったUIが正しく表示されないかもしれません。

// ブラウザがdialogをサポートしているかチェックする
if (typeof HTMLDialogElement === 'function') {
  // dialogがサポートされている場合の処理
  // ここでダイアログを表示したりする
} else {
  // dialogがサポートされていない場合の処理
  // 代替UIを表示したりフォールバック処理を行う
}

実行結果として、ブラウザがdialogをサポートしているかどうかで、処理を分岐できます。

dialogがサポートされていない環境では、alertなどの代替手段を使ったり、ライブラリを使ってダイアログを実装したりする必要があります。

dialogを使う際は、ブラウザ互換性を考慮することが大切です。

必要に応じてフォールバック処理を用意し、どの環境でも問題なく動作するようにしましょう。

○dialogとフォーム連携時の注意点

dialogの中にフォームを配置する際は、何点か注意点があります。

dialogとフォームを組み合わせると、予期しない動作をすることがあるからです。

dialogの中にフォームを置いて、そのフォームをsubmitすると、ダイアログが勝手に閉じてしまうことがあります。

これを防ぐには、フォームのsubmitイベントをキャンセルする必要があります。

<dialog id="myDialog">
  <form method="dialog">
    <label>名前: <input type="text" name="name"></label>
    <button type="submit" value="ok">OK</button>
  </form>
</dialog>

<script>
  const dialog = document.getElementById('myDialog');
  dialog.querySelector('form').addEventListener('submit', (event) => {
    // フォームのsubmitイベントをキャンセルする
    event.preventDefault();
    // dialogを閉じる
    dialog.close();
  });
</script>

上記のコードでは、フォームのsubmitイベントをキャンセルしてから、明示的にdialog.close()を呼び出しています。

こうすることで、フォームの送信が完了した後に意図的にダイアログを閉じることができます。

dialogの中でフォームを使う時は、submitイベントの扱いに気をつけましょう。

予期しない動作を避けるため、イベントをキャンセルして明示的にダイアログを閉じるのがおすすめです。

●dialogの応用例

さて、ここまでdialogの基本的な使い方やスタイリング、エラー対処法などを見てきました。

そろそろ実践的な応用例を見てみたいですよね。

dialogを使えば、ユーザーとのインタラクションをより円滑にできるはずです。

dialogは、ユーザーに情報を伝えたり、入力を促したりするのに最適です。

dialogを使えば、ページ遷移せずにユーザーとコミュニケーションができるからです。

たとえば、ユーザー登録フォームをダイアログ内に表示すれば、ユーザーはページを離れずに登録を完了できます。

また、重要な確認事項を表示する際にもdialogが役立ちます。

dialogを活用することで、ユーザー体験を向上させられるでしょう。実際の事例を見ていきましょう。

○サンプルコード10：ダイアログ内でのフォーム送信

まずは、ダイアログ内でフォームを送信する例を見てみましょう。

ユーザーがフォームを送信すると、ダイアログが閉じ、送信結果が表示されます。

<button id="openButton">フォームを開く</button>

<dialog id="myDialog">
  <form method="dialog">
    <label>名前: <input type="text" name="name"></label>
    <label>メール: <input type="email" name="email"></label>
    <button type="submit">送信</button>
  </form>
</dialog>

<output id="result"></output>

<script>
  const dialog = document.getElementById('myDialog');
  const openButton = document.getElementById('openButton');
  const result = document.getElementById('result');

  openButton.addEventListener('click', () => {
    dialog.showModal();
  });

  dialog.addEventListener('close', () => {
    if (dialog.returnValue === 'submit') {
      const formData = new FormData(dialog.querySelector('form'));
      result.value = `送信結果：\n名前: ${formData.get('name')}\nメール: ${formData.get('email')}`;
    }
  });
</script>

実行結果としては、”フォームを開く”ボタンをクリックすると、名前とメールアドレスを入力するフォームを含むダイアログが表示されます。

フォームを送信すると、ダイアログが閉じ、送信された内容が<output>要素に表示されます。

このサンプルコードでは、<form>要素のmethod属性に"dialog"を指定することで、フォームの送信がダイアログのcloseイベントを発火させるようにしています。

closeイベントのリスナー内で、dialog.returnValueをチェックし、フォームが送信された場合は入力内容を取得して表示しています。

ダイアログ内でフォームを使うことで、ユーザーはページを離れずにデータを送信できます。

これはUXの向上につながるでしょう。

○確認ダイアログの実装アイデア

dialogを使って、ユーザーに確認を求めるダイアログを実装してみましょう。

はい/いいえボタンを表示し、ユーザーの選択に応じて処理を分岐します。

<button id="deleteButton">アカウントを削除</button>

<dialog id="confirmDialog">
  <p>本当にアカウントを削除しますか？</p>
  <button id="yesButton">はい</button>
  <button id="noButton">いいえ</button>
</dialog>

<script>
  const dialog = document.getElementById('confirmDialog');
  const deleteButton = document.getElementById('deleteButton');
  const yesButton = document.getElementById('yesButton');
  const noButton = document.getElementById('noButton');

  deleteButton.addEventListener('click', () => {
    dialog.showModal();
  });

  yesButton.addEventListener('click', () => {
    // アカウント削除処理を実行
    console.log('アカウントが削除されました');
    dialog.close();
  });

  noButton.addEventListener('click', () => {
    dialog.close();
  });
</script>

実行して”アカウントを削除”ボタンをクリックすると、確認ダイアログが表示されます。

“はい”をクリックするとアカウント削除処理が実行され（ここでは簡単にconsole.logを使っています）、ダイアログが閉じます。”いいえ”をクリックすると、ダイアログが閉じます。

このように、dialogを使えば簡単に確認ダイアログを実装できます。

ユーザーに重要な選択を求める際に、誤操作を防ぐのに役立つでしょう。

○ウィザード形式のダイアログフロー

複数のステップに分けて情報を収集する際には、ウィザード形式のダイアログフローが有効です。

dialogを使って、次のようなフローを実装してみましょう。

<button id="openWizard">ウィザードを開始</button>

<dialog id="wizardDialog">
  <form method="dialog">
    <div id="step1">
      <p>ステップ1: 名前を入力してください</p>
      <label>名前: <input type="text" name="name"></label>
      <button type="submit" value="next">次へ</button>
    </div>
    <div id="step2" style="display: none;">
      <p>ステップ2: メールアドレスを入力してください</p>
      <label>メール: <input type="email" name="email"></label>
      <button type="submit" value="prev">前へ</button>
      <button type="submit" value="next">次へ</button>
    </div>
    <div id="step3" style="display: none;">
      <p>ステップ3: 送信内容の確認</p>
      <p>名前: <span id="nameConfirm"></span></p>
      <p>メール: <span id="emailConfirm"></span></p>
      <button type="submit" value="prev">前へ</button>
      <button type="submit" value="submit">送信</button>
    </div>
  </form>
</dialog>

<script>
  const dialog = document.getElementById('wizardDialog');
  const openButton = document.getElementById('openWizard');

  openButton.addEventListener('click', () => {
    dialog.showModal();
  });

  dialog.addEventListener('close', () => {
    if (dialog.returnValue === 'next') {
      const currentStep = dialog.querySelector('div:not([style*="display: none"])');
      const nextStep = currentStep.nextElementSibling;
      if (nextStep) {
        currentStep.style.display = 'none';
        nextStep.style.display = 'block';
        dialog.showModal();
      }
    } else if (dialog.returnValue === 'prev') {
      const currentStep = dialog.querySelector('div:not([style*="display: none"])');
      const prevStep = currentStep.previousElementSibling;
      if (prevStep) {
        currentStep.style.display = 'none';
        prevStep.style.display = 'block';
        dialog.showModal();
      }
    } else if (dialog.returnValue === 'submit') {
      const formData = new FormData(dialog.querySelector('form'));
      document.getElementById('nameConfirm').textContent = formData.get('name');
      document.getElementById('emailConfirm').textContent = formData.get('email');
    }
  });
</script>

このコードでは、”ウィザードを開始”ボタンをクリックすると、ステップ1のダイアログが表示されます。

名前を入力して”次へ”をクリックすると、ステップ2のダイアログが表示されます。

メールアドレスを入力し、”次へ”をクリックすると、ステップ3で入力内容の確認が表示されます。

“前へ”をクリックすると、前のステップに戻ることができます。

このサンプルコードでは、複数の<div>要素を使ってウィザードの各ステップを表現しています。

closeイベントのリスナー内で、dialog.returnValueの値に応じて、次のステップや前のステップを表示したり、フォームの送信を処理したりしています。

まとめ

dialogは、モダンなWeb開発に欠かせないツールの一つです。

今回学んだ知識を活かして、あなたのプロジェクトにdialogを積極的に取り入れてみましょう。

ユーザーとのエンゲージメントを高め、インタラクティブで魅力的なWebサイトを作る助けになるはずです。