Menguasai Elemen HTMLlt;dialog>: Penyelesaian Asli untuk Modal

Elemen: Penyelesaian Asli untuk Modal" />

Pengenalan: Teg dialog telah diperkenalkan dalam HTML5 dan anda tahu maksudnya—tiada lagi dirantai dengan penyelesaian luaran seperti Bootstrap untuk modal dan pop timbul tersebut! Dengan elemen asli HTML5, anda boleh membuat kotak dialog, gesaan dan tetingkap timbul terus dalam kod anda.

Mari kita buat borang ringkas di dalam teg dialog dan butang yang akan membuka borang secara ajaib apabila diklik.

Membuat Dialog (Ia Lebih Mudah Daripada Yang Anda Fikirkan!):

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

Penjelasan: Kami mencipta bentuk dan bersarang di dalamnya. Borang itu meminta nama (kerana menamakan sesuatu, sudah tentu, bahagian paling sukar dalam pengaturcaraan). Kami telah menambahkan dua CTA—satu untuk menyerahkan borang dan satu untuk membatalkannya. Mudah peasy.

Mari Togol Keterlihatan Dialog:

Dialog malu secara lalai (iaitu, ia tersembunyi), tetapi jangan takut! Dengan sedikit JavaScript, kami boleh memanggil mereka untuk bertindak! Inilah mantera ajaib:

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

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

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

Penjelasan: Kami menggunakan querySelector untuk memilih dialog kami. Kemudian, kami menulis dua fungsi—satu untuk membuka dialog dan satu untuk menutupnya. Sama seperti itu - dialog dibuka dan ditutup atas arahan anda!

Kod HTML dalam Tindakan:

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

Penjelasan:

1. Kami telah melampirkan closeDialog() pada butang "Batal".
2. Butang "Buka" menggunakan showDialog() untuk membuka dialog.

Sekarang, saya tahu apa yang anda fikirkan: "Tetapi bagaimana jika pengguna mengklik di luar borang (di tirai latar)?" Jangan risau—saya bantu awak!

Mari Tutup Dialog Apabila Mengklik Tirai Latar:

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

Penjelasan: Kami menambahkan pendengar acara pada dialog itu sendiri yang menutup dialog jika tirai latar diklik. Div kandungan ialah perlindungan kami—jika anda mengklik di dalam, dialog kekal diletakkan. Tetapi klik di luar? Poof! Ia sudah tiada.

Masa untuk Menggayakan Dialog:

Berikut ialah beberapa penggayaan asas untuk menceriakan kotak dialog anda. Kami juga akan menambah beberapa ketelusan tirai latar untuk rupa modal yang anggun itu supaya ia tidak membayangi segala-galanya di sekelilingnya."

* {
  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;
}

Cuba Sendiri! ?

Ingin melihat dialog beraksi? Lihat kotak pasir kod ini:

? Klik di sini untuk membuka kotak pasir kod!

Anda boleh bermain-main dengan kod itu, mengubah suainya dan menonton keajaiban berlaku secara langsung. ?✨

Kesimpulan:

Itu sahaja! Anda kini telah menguasai elemen HTML5. Sama ada anda ingin membuat borang pop timbul, gesaan atau penuh, tanda nama ialah kawan baik baharu anda.

Tetapi sebelum anda pergi, berikut ialah petua profesional: Anda harus mencipta komponen dialog boleh guna semula untuk keseluruhan projek anda.

Hei, jangan lupa untuk suka, kongsi dan tunjukkan siaran ini rasa cinta jika ia menjadikan hidup anda lebih mudah.

Selamat mengekod!

Atas ialah kandungan terperinci Menguasai Elemen HTMLlt;dialog>: Penyelesaian Asli untuk Modal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!