MENEROKA ELEMEN HTML:

DEMO

pengenalan

Elemen dialog telah disokong secara meluas oleh semua penyemak imbas sejak sekian lama, dan saya di sini untuk menunjukkan kepada anda cara elemen ini boleh meningkatkan produktiviti dan kualiti kod anda, tanpa mengira rangka kerja yang anda gunakan.

Saya menggunakan JavaScript biasa untuk menunjukkan bahawa anda tidak memerlukan banyak baris kod untuk mencipta komponen yang cantik dan ringkas.
Menggunakan elemen ini agak mudah:

<main>
  <dialog>





<pre class="brush:php;toolbar:false">const dialog = document.getElementById('dialog');
const dialogButton = document.getElementById('dialogButton');

dialogButton.addEventListener('click', () => dialog.showModal());

Seperti yang anda lihat di atas, anda hanya perlu mengambil rujukan elemen dialog dan memanggil salah satu daripada dua fungsi ini:

dialogButton.addEventListener('click', () => dialog.showModal());
dialogButton.addEventListener('click', () => dialog.show());

Tetapi anda mungkin tertanya-tanya:

Apakah perbezaan antara kedua-dua fungsi ini?

Nah, untuk memahaminya, kita perlu memahami sedikit tentang lapisan dan apakah lapisan atas.

Lapisan

Izinkan saya memberi anda contoh sesuatu yang mungkin anda temui sebelum ini semasa menggunakan komponen laci. Anda memanggil komponen seperti biasa dalam html anda dan ia akhirnya tidak dibuka pada keseluruhan skrin, hanya dalam konteks yang anda letakkan, jadi anda akhirnya perlu meletakkan laci anda dalam index.html untuk dibuka dalam keseluruhan port pandangan atau mengisi css anda dengan kedudukan dan indeks-z untuk mencipta konteks bertindih.

Dengan menggunakan lapisan, anda boleh menjadikannya lebih mudah, tetapi anda juga akhirnya mencemarkan sedikit dokumen css anda. Dengan menggunakan showModal() ia membuka elemen dialog dalam lapisan atas itu sudah dengan konteks yang berasingan tanpa sebarang konfigurasi diperlukan. Jika anda menggunakan show() ia tidak memanggil dialog dalam lapisan atas itu dan anda boleh mempunyai gelagat biasa port pandang.

Lapisan atas ialah "lapisan" yang mengembang pada keseluruhan port pandangan dan menindih semua lapisan yang dibuat oleh anda atau pelayar web anda. Ia banyak membantu dan mengelakkan penggerudian prop berlebihan yang terkenal.

Baiklah, okey, tetapi bagaimana cara saya menggayakan elemen ini? Ia pasti sangat sukar!

Tidak sama sekali! Ia semudah memusatkan div... Mungkin lebih sedikit!

Dialog / Modal

Untuk penggayaan yang lebih mendalam, saya syorkan anda melihat video daripada Kevin Powell ini.

Untuk menggayakan dialog adalah mudah, cuma letakkan id/kelas dalam elemen dan gunakan CSS.

<main>
  <dialog>





<pre class="brush:php;toolbar:false">#dialog {
  border: none;
  width: 20rem;
  height: 20rem;
  border-radius: 1.69%; /* NICE! */
}

#dialog[open] {
  /* OMG! I know how to center a div */
  display: flex;
  justify-content: center;
  align-items: center;
}

Seperti yang anda lihat di atas, saya menggunakan #dialog[open] untuk mengubah suai kedudukan elemen. Apabila anda mencipta dialog ia datang secara lalai dengan paparan dilumpuhkan.

Atribut ini hanya ditambahkan apabila anda memanggil salah satu daripada dua fungsi.
Jadi apabila menggayakan sebarang elemen dialog, sentiasa cuba gunakan nama kelas/id anda dan atribut untuk mengelakkan masalah paparan.
Dan seperti yang anda boleh lihat di atas, dialog sudah datang dengan kesan :: latar belakang dan ia juga sangat mudah untuk mengubah suainya.

<main>
  <dialog>





<pre class="brush:php;toolbar:false">const dialog = document.getElementById('dialog');
const dialogButton = document.getElementById('dialogButton');

dialogButton.addEventListener('click', () => dialog.showModal());

Tunjukkan! Sangat mudah! Tetapi bagaimana saya menutup modal ini? Apabila saya mengklik pada tirai latar tiada apa yang berlaku!

Jom! Secara lalai elemen tidak datang dengan kemungkinan ini. Jika anda ingin menutup modal anda perlu memanggil fungsi untuk menutupnya menggunakan butang dalaman atau sesuatu seperti itu.

dialogButton.addEventListener('click', () => dialog.showModal());
dialogButton.addEventListener('click', () => dialog.show());

Tetapi jika anda ingin meniru kesan penutupan ini dengan mengklik di luar, anda boleh menggunakan fungsi mudah untuk mengenal pasti tepi elemen dialog untuk mengetahui sama ada anda telah mengklik di luar atau tidak.

<main>
  <dialog>





<pre class="brush:php;toolbar:false">#dialog {
  border: none;
  width: 20rem;
  height: 20rem;
  border-radius: 1.69%; /* NICE! */
}

#dialog[open] {
  /* OMG! I know how to center a div */
  display: flex;
  justify-content: center;
  align-items: center;
}

Tingkah lakunya kelihatan seperti ini:

Saya syorkan anda untuk melihat Popover API jika ini yang anda mahu lakukan secara berterusan.

Lelaki, itu hodoh! Perpustakaan saya sudah dianimasikan!

Jangan risau! Mari tambahkan animasi pudar masuk yang mudah.

#dialog[open]::backdrop {
  background: rgba(255, 0, 0, 60%);
}

Menambah animasi fade-out adalah sedikit lebih sukar kerana anda tidak mempunyai cara untuk mengenal pasti bila pengguna akan menutup modal, jadi kami perlu membuat perubahan pada fail skrip kami.

dialog.close();

Dua perkara penting telah dilakukan:

1. Parameter baharu telah ditambahkan untuk menentukan tempoh animasi untuk menutup modal (selepas beberapa carian saya menjumpai video ini daripada Kevin Powell).

2. Saya menambah atribut yang dipanggil penutup apabila pengguna mengklik. Ia dialih keluar menggunakan parameter masa yang dinyatakan di atas.
   

/** @type {HTMLDialogElement} */
const dialog = document.getElementById('dialog');

/**
 * Adds a close behavior to clicking outside dialog element
 * @param {HTMLDialogElement} dialogRef - The refer to element Dialog.
 * @example
 * const dialog = document.querySelector('#dialog');
 * closeDialogClickingOutside(dialog)
 */
 const closeByClickingOutside = (dialogRef) => {
  dialogRef.addEventListener('click', (ev) => {
    if (
      ev.offsetX < 0 ||
      ev.offsetX > ev.target.offsetWidth ||
      ev.offsetY < 0 ||
      ev.offsetY > ev.target.offsetHeight
    ) {
      dialogRef.close();
    }
  });
};

closeByClickingOutside(dialog);

Dan di sana kami mempunyai dialog animasi sepenuhnya tanpa sebarang perpustakaan!

Bagus! Tetapi bagaimana anda membuat laci menggunakan elemen ini?

Nah, untuk mencapai ini, kita perlu mengambil gaya lalai elemen dialog dan menulis gantinya...

Laci

Laci dibuka di atas skrin pada ketinggian penuh. Jadi mari kita buat elemen laci baharu dari awal.

<main>
  <dialog>





<pre class="brush:php;toolbar:false">const dialog = document.getElementById('dialog');
const dialogButton = document.getElementById('dialogButton');

dialogButton.addEventListener('click', () => dialog.showModal());

Adalah penting untuk ambil perhatian bahawa untuk menetapkan laci kepada ketinggian penuh skrin anda perlu menulis ganti ketinggian maksimum lalai dialog!

dialogButton.addEventListener('click', () => dialog.showModal());
dialogButton.addEventListener('click', () => dialog.show());

Kini mudah: cuma tambah animasi menggunakan fungsi yang sama yang anda buat dalam dialog langkah demi langkah dan anda sudah selesai!

<main>
  <dialog>





<pre class="brush:php;toolbar:false">#dialog {
  border: none;
  width: 20rem;
  height: 20rem;
  border-radius: 1.69%; /* NICE! */
}

#dialog[open] {
  /* OMG! I know how to center a div */
  display: flex;
  justify-content: center;
  align-items: center;
}

#dialog[open]::backdrop {
  background: rgba(255, 0, 0, 60%);
}

<dialog>



<p><img src="https://img.php.cn/upload/article/000/000/000/173086397449699.jpg" alt="EXPLORING HTML ELEMENTS: <DIALOG>"></p>

<h2>
  
  
  Terima kasih kerana membaca
</h2>

<p>Ini adalah catatan pertama saya di sini jadi terima kasih kerana membaca dan jika saya telah membantu dalam apa-apa cara saya mengesyorkan anda mengikuti saya di linkedin bahasa pertama saya adalah Portugis jadi kebanyakan siaran saya adalah dalam bahasa Portugis tetapi saya cuba menghantar sesuatu dalam bahasa Inggeris juga. Saya berhasrat untuk menyiarkan perkara yang serupa mulai sekarang, jika anda mempunyai sebarang cadangan tentang cara menambah baik modal dan strategi laci ini, anda boleh menghantarnya kepada saya di sana.</p>


          

            
        

Atas ialah kandungan terperinci MENEROKA ELEMEN HTML:

. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!