🙆

HTMLのdialog要素を練習する

中島滋

2024/11/06に公開

HTML

dialog

tech

HTMLのdialog要素が2022年から使えるようになりました。
以前は jQuery UIのDialog などを使ってダイアログを作っていました。HTMLのdialog要素をつかうと、より手軽にダイアログが作れるようになりました。

<dialog>: ダイアログ要素 - HTML: ハイパーテキストマークアップ言語 | MDN を読みながらdialog要素の使い方を練習します。

最初の一歩

一番シンプルな例を実行してみます。

<dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

次のようなダイアログが表示されます。

いくつか興味深い点があります。

<dialog open>

dialog要素はopen属性があると、開いて表示されます。

<form method="dialog">

form要素のmethod属性がdialogのとき、submitイベントでフォームのデータが送信されません。

お題

今回作成するダイアログの用途を決めます。
特定のテキストを編集するダイアログを作成します。

ダイアログに次の要素を配置します。

編集前のテキスト
テキストを編集するテキストエリア
OKボタン

表示要素を設定

最初のサンプルのHTMLを改造し、HTML要素を配置します。

<dialog open>
  <h3>編集前</h3>
  <div>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。</div>
  <h3>編集後</h3>
  <form method="dialog">
    <textarea>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。</textarea>
    <div>
      <button value="OK">OK</button>
    </div>
  </form>
</dialog>

次のような見た目になりました。

タイトルバーを追加

ダイアログっぽくするためにタイトルバーを追加します。

.title-bar {
  background-color: #666;
  color: white;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<div class="title-bar">
  <span>編集ダイアログ</span>
</div>

閉じるボタンを追加

タイトルバーに「閉じるボタン」を追加します。

.title-bar button {
  border: 1px solid white;
  background-color: transparent;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

<button onclick="document.querySelector('#myDialog').close()">X</button>

JavaScriptからダイアログを開く

今はダイアログが最初から開いています。最初は閉じておいて、「編集開始ボタン」を押したときにダイアログを開くようにします。

ダイアログを修正します。

<dialog id="myDialog">

編集開始ボタンを追加します。

<button onclick="document.querySelector('#myDialog').showModal()">編集開始</button>

OKボタンのイベントハンドリング

「OKボタン」を押したときに何かJavaScriptを動かしてみましょう。今回は編集後の文字列をalertで表示します。

<script>
var dialog = document.querySelector('#myDialog');
dialog.addEventListener('close', (event) => {
  var dialog = event.target;
  var returnValue = dialog.returnValue;
  if (returnValue === 'OK') {
    var form = dialog.querySelector('form');
    var textarea = form.querySelector('textarea');
    var text = textarea.value;
    console.log(text);
  }
});
</script>

見た目を整える

スタイルシートを適用して、見た目を整えます。

dialog {
  width: 500px;
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
  background-color: #f0f0f0;
}

textarea {
  width: 100%;
  margin-bottom: 10px;
}

button {
  margin-left: 10px;
}

完成形

完成したソースコードを1つのHTMLファイルにまとめます。

<html>

<head>
  <meta charset="utf-8">
  <style>
    dialog {
      width: 500px;
      padding: 10px;
      border: 1px solid black;
      border-radius: 5px;
      background-color: #f0f0f0;
    }

    textarea {
      width: 100%;
      margin-bottom: 10px;
    }

    button {
      margin-left: 10px;
    }

    .title-bar {
      background-color: #666;
      color: white;
      padding: 5px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      button {
        border: 1px solid white;
        background-color: transparent;
        color: white;
        font-size: 16px;
        cursor: pointer;
      }
    }
  </style>
</head>

<body>
  <button onclick="document.getElementById('myDialog').showModal()">編集開始</button>

  <dialog id="myDialog">
    <div class="title-bar">
      <span>編集ダイアログ</span>
      <button onclick="document.getElementById('myDialog').close()">X</button>
    </div>
    <h3>編集前</h3>
    <div>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。</div>
    <h3>編集後</h3>
    <form method="dialog">
      <textarea>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。</textarea>
      <div>
        <button value="OK">OK</button>
      </div>
    </form>
  </dialog>

  <script>
    var dialog = document.getElementById('myDialog');
    dialog.addEventListener('close', (event) => {
      var dialog = event.target;
      var returnValue = dialog.returnValue;
      if (returnValue === 'OK') {
        var form = dialog.querySelector('form');
        var textarea = form.querySelector('textarea');
        var text = textarea.value;
        alert(text);
      }
    });
  </script>
</body>

</html>

ラグザイアPublication

株式会社ラグザイア（luxiar.com）の技術広報ブログです。ラグザイアはRuby on RailsとC#に特化した町田の受託開発企業です。フルリモートでの開発を積極的に推進しており、全国からの参加を可能にしています。柔軟な働き方で最新のソフトウェアソリューションを提供します。