HTMLlt;dialog> 要素をマスターする: モーダルのネイティブソリューション-CSSチュートリアル-php.cn

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

WBOY

リリース： 2024-09-01 20:32:11

オリジナル

479 人が閲覧しました

Mastering the 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>

ログイン後にコピー

説明:

「キャンセル」ボタンに closeDialog() を追加しました。
「開く」ボタンは 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 サイトの他の関連記事を参照してください。