HTMLlt;dialog> 要素をマスターする: モーダルのネイティブ ソリューション

要素: モーダルのネイティブ ソリューション" />

はじめに: Dialog タグは HTML5 で導入されました。それが何を意味するかはもうおわかりでしょう。これらのモーダルやポップアップは、Bootstrap などの外部ソリューションにチェーンされています。 HTML5 のネイティブ要素を使用すると、ダイアログ ボックス、プロンプト、ポップアップをコード内で直接作成できます。

ダイアログ タグ内に単純なフォームと、クリックすると魔法のようにフォームが開くボタンを作成しましょう。

ダイアログの作成 (思ったより簡単です!):

<dialog id="my-dialog">
    <div class="content">
      <form method="dialog">
        <p>Form inside a dialog</p>
        <div>
          <label for="name">Name: </label>
          <input type="text" id="name" name="name" />
        </div>
        <menu>
            <button type="submit">Submit</button>
            <button type="button">Cancel</button>
        </menu>
      </form>
    </div>
</dialog>
<button class="open-btn">Open Dialog</button>

説明: 中に入れ子形式のフォームを作成しました。フォームは名前を要求します (もちろん、名前を付けるのはプログラミングで最も難しい部分だからです)。フォームを送信するための CTA とフォームをキャンセルするための CTA の 2 つの CTA を追加しました。簡単で簡単です。

ダイアログの表示/非表示を切り替えましょう:

ダイアログはデフォルトでは恥ずかしがります (つまり、非表示になっています) が、心配する必要はありません。ちょっとした JavaScript を使えば、それらを実行に移すことができます。魔法の呪文は次のとおりです:

<script>
   const dialog = document.getElementById("my-dialog");

   function showDialog() {
     dialog.showModal();
   }

   function closeDialog() {
     dialog.close();
   }
</script>

説明: querySelector を使用してダイアログを選択します。次に、ダイアログを開く関数とダイアログを閉じる関数の 2 つを作成します。このように、コマンドに応じてダイアログが開いたり閉じたりします!

動作中の HTML コード:

<dialog id="my-dialog" open="true">
   <div class="content">
     <form method="dialog">
       <p>Form inside a dialog</p>
       <div>
         <label for="name">Name: </label>
         <input type="text" id="name" name="name" />
       </div>
       <menu>
         <button type="submit">Submit</button>
         <button type="button" onclick="closeDialog()">Cancel</button>
       </menu>
     </form>
   </div>
</dialog>
<button class="open-btn" onclick="showDialog()">Open Dialog</button>

説明:

1. 「キャンセル」ボタンに closeDialog() を追加しました。
2. 「開く」ボタンは showDialog() を使用してダイアログを開きます。

ここで、あなたが考えていることはわかります。「しかし、ユーザーがフォームの外側 (背景) をクリックしたらどうなるでしょうか?」心配しないでください。私があなたをサポートします!

背景をクリックしたらダイアログを閉じましょう:

dialog.addEventListener("click", function (event) {
     if (event.target === dialog) {
       closeDialog();
     }
});

説明: 背景がクリックされた場合にダイアログを閉じるイベント リスナーをダイアログ自体に追加しました。 content div は安全装置です。内側をクリックすると、ダイアログはそのまま表示されます。しかし、外側をクリックしますか?ふーん！消えてしまいました。

ダイアログのスタイルを設定します:

ダイアログ ボックスをおしゃれにするための基本的なスタイルをいくつか紹介します。また、周囲のすべてを覆い隠さないよう、洗練されたモーダルな外観に背景の透明度を追加します。」

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#root {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
}

#my-dialog {
  top: 50%;
  left: 50%;
  width: 60vw;
  position: absolute;
  border-radius: 10px;
  transform: translate(-50%, -50%);
}

#my-dialog .content {
  padding: 28px;
}

#my-dialog .content form {
  gap: 16px;
  display: flex;
  flex-direction: column;
}

dialog::backdrop {
  opacity: 0.5;
  background-color: #898989;
}

.open-btn {
  padding: 5px 10px;
}

自分で試してみましょう! ?

ダイアログの動作を見てみたいですか?このコードサンドボックスをチェックしてください:

?ここをクリックしてコードサンドボックスを開きます!

コードを試したり、微調整したり、魔法が起こる様子をライブで見ることができます。 ?✨

結論:

それだけです！これで、HTML5 要素をマスターできました。ポップアップ、プロンプト、または完全なフォームを作成する場合でも、タグは新しい親友です。

その前に、プロのヒントをご紹介します。プロジェクト全体で再利用可能なダイアログ コンポーネントを作成する必要があります。

生活が楽になったら、この投稿に「いいね！」をしたり、共有したり、愛情を示すことを忘れないでください。

コーディングを楽しんでください!

以上がHTMLlt;dialog> 要素をマスターする: モーダルのネイティブ ソリューションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。