Cara Menggunakan Elemen HTMLlt;dialog>

Dalam pembangunan bahagian hadapan, membina atau menggunakan komponen UI pra-bina ialah tugas biasa. Walau bagaimanapun, komponen ini sering datang dengan batasan. Mereka biasanya terikat pada rangka kerja tertentu dan memerlukan logik yang kompleks dan tidak standard. Untuk masa yang lama, komponen UI asas seperti tetingkap dialog bergantung pada pelaksanaan tersuai atau, dalam kes yang lebih mudah, kaedah JavaScript terbina dalam seperti alert(), prompt() dan confirm().

Berita baiknya ialah anda kini boleh melaksanakan komponen ini menggunakan

Elemen HTML, yang merupakan sebahagian daripada standard HTML5 dan disokong sepenuhnya oleh semua penyemak imbas moden.

Teg HTML, yang diperkenalkan pada Mei 2013 sebagai sebahagian daripada draf kerja W3C, telah dilancarkan bersama elemen interaktif seperti dan untuk menangani cabaran UI biasa. Dikeluarkan pada 2014,

pada mulanya hanya disokong dalam Google Chrome dan Opera. Sokongan penuh untuk

dalam Firefox dan Safari hanya datang pada Mac 2022, menangguhkan penggunaannya dalam projek pengeluaran. Walau bagaimanapun, dengan lebih dua tahun sokongan daripada pelayar utama,

elemen kini cukup stabil untuk menggantikan

tersuai

Mari kita terokai ciri

dengan lebih terperinci.

Aspek teras penggunaan

HTML

tag mencipta kotak dialog tersembunyi secara lalai yang boleh berfungsi sama ada sebagai popup atau tetingkap modal.

Tetingkap timbul kerap digunakan untuk memaparkan pemberitahuan ringkas, seperti mesej kuki, makluman roti bakar yang hilang, petua alat atau elemen menu konteks klik kanan.

Tetingkap modal membantu pengguna menumpukan pada tugas tertentu, seperti pemberitahuan dan amaran yang memerlukan pengesahan pengguna, borang interaktif yang kompleks dan peti cahaya untuk imej atau video.

Tetingkap timbul tidak menghalang interaksi dengan halaman, manakala tetingkap modal menindih dokumen, meredupkan latar belakang dan menyekat tindakan lain. Tingkah laku ini berfungsi tanpa gaya atau skrip tambahan; satu-satunya perbezaan ialah kaedah yang digunakan untuk membuka dialog.

Kaedah pembukaan tetingkap dialog

— pop timbul:

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

— tetingkap modal:

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

Dalam kedua-dua kes, membuka

tag menetapkan atribut terbukanya kepada benar. Menetapkannya secara langsung akan membuka dialog sebagai pop timbul, bukan modal. Untuk membuat tetingkap modal, anda mesti menggunakan kaedah yang sesuai. Tiada JavaScript diperlukan untuk mencipta pop timbul yang mula dibuka.

<dialog open>Hi, I'm a popup!</dialog>

Cubalah:

• Membuka pop timbul menggunakan kaedah .show(): https://codepen.io/alexgriss/pen/zYeMKJE
• Membuka tetingkap modal menggunakan kaedah .showModal(): https://codepen.io/alexgriss/pen/jOdQMeq
• Mengubah atribut terbuka secara langsung: https://codepen.io/alexgriss/pen/wvNQzRB

Pendekatan penutupan tetingkap dialog

Tetingkap dialog ditutup dengan cara yang sama, tidak kira bagaimana ia dibuka. Berikut ialah beberapa cara untuk menutup tetingkap pop timbul atau modal:

— dengan kaedah .close():

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

— dengan mencetuskan acara serah dalam borang dengan atribut method="dialog":

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

— dengan menekan kekunci Esc:

Penutupan dengan Esc berfungsi untuk tetingkap modal sahaja. Ia mula-mula mencetuskan acara pembatalan, kemudian ditutup, menjadikannya mudah untuk memberi amaran kepada pengguna tentang perubahan yang tidak disimpan dalam borang.

Cubalah:

• Menutup kotak dialog dengan kaedah tutup: https://codepen.io/alexgriss/pen/GRzwjaV
• Menutup kotak dialog melalui borang serahan: https://codepen.io/alexgriss/pen/jOdQVNV
• Menutup tetingkap modal dengan kekunci Esc: https://codepen.io/alexgriss/pen/KKJrNKW
• Menghalang tetingkap modal daripada ditutup dengan Esc: https://codepen.io/alexgriss/pen/mdvQObN

Nilai pulangan apabila ditutup

Apabila menutup dialog dengan borang menggunakan atribut method="dialog", anda boleh menangkap nilai butang serah. Ini berguna jika anda ingin mencetuskan tindakan yang berbeza berdasarkan butang yang diklik. Nilai disimpan dalam sifat returnValue.

Cubalah: https://codepen.io/alexgriss/pen/ZEwmBKx

Melihat lebih dekat bagaimana ia berfungsi

Mari kita mendalami mekanik tetingkap dialog dan butiran pelaksanaan penyemak imbasnya.

Mekanik pop timbul

Membuka

sebagai pop timbul dengan .show() atau atribut terbuka meletakkannya secara automatik dengan position: absolute dalam DOM. Gaya CSS asas, seperti jidar dan sempadan, digunakan pada elemen dan item boleh fokus pertama di dalam tetingkap akan mendapat fokus secara automatik melalui atribut autofokus. Selebihnya halaman kekal interaktif.

Mekanik tetingkap modal

Tetingkap modal direka bentuk dan berfungsi dengan cara yang lebih kompleks daripada pop timbul.

Tindanan dokumen

Apabila membuka tetingkap modal dengan .showModal(),

elemen dipaparkan dalam lapisan HTML khas yang meliputi keseluruhan kawasan halaman yang boleh dilihat. Lapisan ini dipanggil lapisan atas dan dikawal oleh pelayar. Dalam sesetengah penyemak imbas seperti Google Chrome, setiap modal dipaparkan dalam nod DOM yang berasingan dalam lapisan ini, boleh dilihat dalam pemeriksa elemen.

Konsep lapisan merujuk kepada konteks tindanan, yang mentakrifkan cara elemen diletakkan di sepanjang paksi Z berbanding pengguna. Menetapkan nilai indeks-z dalam CSS mewujudkan konteks tindanan untuk elemen, di mana kedudukan anak-anaknya dikira dalam konteks tersebut. Tetingkap modal sentiasa berada di bahagian atas hierarki ini, jadi indeks-z tidak diperlukan.

Ketahui lebih lanjut tentang konteks tindanan di MDN.

Untuk mengetahui lebih lanjut tentang elemen yang dipaparkan dalam lapisan atas, lawati MDN.

Menyekat dokumen

Apabila elemen modal dipaparkan di lapisan atas, elemen pseudo :: latar belakang dibuat dengan saiz yang sama dengan kawasan dokumen yang boleh dilihat. Tirai latar ini menghalang interaksi dengan seluruh halaman, walaupun acara penunjuk: tiada peraturan CSS ditetapkan.

Atribut lengai ditetapkan secara automatik untuk semua elemen kecuali tetingkap modal, menyekat tindakan pengguna. Ia melumpuhkan acara klik dan fokus serta menjadikan elemen tidak boleh diakses oleh pembaca skrin dan teknologi bantuan lain.

Ketahui lebih lanjut tentang atribut lengai pada MDN.

Tingkah laku fokus

Apabila modal dibuka, elemen boleh fokus pertama di dalamnya secara automatik mendapat fokus. Untuk menukar elemen fokus awal, anda boleh menggunakan atribut autofokus atau indeks tab. Menetapkan indeks tab untuk elemen dialog itu sendiri tidak boleh dilakukan, kerana ia merupakan satu-satunya elemen pada halaman yang tidak digunakan logik lengai.

Selepas dialog ditutup, fokus kembali kepada elemen yang membukanya.

Menyelesaikan masalah UX dengan tetingkap modal

Malangnya, pelaksanaan asli

elemen tidak merangkumi semua aspek berinteraksi dengan tetingkap modal. Seterusnya, saya ingin membincangkan isu UX utama yang mungkin timbul apabila menggunakan tetingkap modal dan cara menyelesaikannya.

Menyekat tatal

Walaupun tetingkap modal HTML5 asli mencipta elemen pseudo :: latar belakang yang menyekat interaksi dengan kandungan di bawahnya, tatal halaman masih aktif. Ini boleh mengganggu pengguna, jadi disyorkan untuk memotong kandungan badan apabila modal dibuka:

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

Peraturan CSS sedemikian perlu ditambah dan dialih keluar secara dinamik setiap kali tetingkap modal dibuka dan ditutup. Ini boleh dicapai dengan memanipulasi kelas yang mengandungi peraturan CSS ini:

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

Anda juga boleh menggunakan pemilih :has jika status sokongannya memenuhi keperluan projek.

<dialog open>Hi, I'm a popup!</dialog>

Cubalah: https://codepen.io/alexgriss/pen/XWOyVKj

Menutup dialog dengan mengklik di luar tetingkap

Ini ialah senario UX standard untuk tetingkap modal dan ia boleh dilaksanakan dalam beberapa cara. Berikut adalah dua cara untuk menyelesaikan masalah ini:

Kaedah berdasarkan kelakuan elemen pseudo :: latar belakang

Mengklik pada elemen pseudo :: latar belakang dianggap sebagai klik pada elemen dialog itu sendiri. Oleh itu, jika anda membalut keseluruhan kandungan tetingkap modal dalam

dan kemudian menutup elemen dialog itu sendiri, anda boleh menentukan ke mana klik itu diarahkan — pada tirai latar atau pada kandungan tetingkap modal.

Jangan lupa untuk menetapkan semula pelapik lalai penyemak imbas dan gaya sempadan untuk

elemen untuk menghalang tetingkap modal daripada ditutup pada klik tidak sengaja:

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

Sekarang, kami menggunakan gaya biasa untuk sempadan dan jidar tetingkap modal hanya pada pembalut dalam.

Kita perlu menulis fungsi yang akan menutup tetingkap modal hanya apabila mengklik pada tirai latar, bukan pada elemen pembalut dalam:

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

Cubalah: https://codepen.io/alexgriss/pen/mdvQXpJ

Kaedah berdasarkan penentuan saiz tetingkap dialog

Kaedah ini berbeza daripada yang pertama, yang memerlukan pembungkus tambahan untuk kandungan modal. Di sini, anda tidak memerlukan sebarang pembalut tambahan. Apa yang diperlukan ialah menyemak sama ada kedudukan kursor berada di luar kawasan elemen apabila diklik:

<dialog open>Hi, I'm a popup!</dialog>

Cubalah: https://codepen.io/alexgriss/pen/NWoePVP

Menggayakan tetingkap dialog

elemen adalah lebih fleksibel dari segi penggayaan daripada banyak elemen HTML asli. Berikut ialah beberapa contoh untuk menggayakan tetingkap dialog:

Menggayakan tirai latar menggunakan :: pemilih tirai latar: https://codepen.io/alexgriss/pen/ExrOQEO

Membuka dan menutup tetingkap dialog animasi: https://codepen.io/alexgriss/pen/QWYJQJO

Tetingkap modal sebagai bar sisi: https://codepen.io/alexgriss/pen/GRzwxgr

Kebolehcapaian

Untuk masa yang lama,

elemen mempunyai beberapa masalah kebolehaksesan, tetapi kini ia berfungsi dengan baik dengan teknologi bantuan utama seperti pembaca skrin (VoiceOver, TalkBack, NVDA).

Apabila

dibuka, fokus dialihkan ke dialog oleh pembaca skrin. Untuk tetingkap modal, fokus kekal dalam dialog sehingga ia ditutup.

Secara lalai,

elemen diiktiraf oleh teknologi bantuan sebagai mempunyai atribut ARIA role="dialog". Dialog modal akan diiktiraf sebagai mempunyai atribut ARIA aria-modal="true".

Berikut ialah beberapa cara untuk meningkatkan kebolehcapaian

elemen:

aria-labelledby

Sentiasa sertakan tajuk di dalam tetingkap dialog dan nyatakan atribut aria-labelledby untuk

elemen, dengan nilai ditetapkan kepada id tajuk.

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

Jika anda perlu menggayakan elemen pseudo ::backdrop, pastikan anda turut menggunakan gaya tersebut pada elemen .backdrop yang sepadan untuk memastikan keserasian dengan penyemak imbas lama:

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

Adalah disyorkan untuk menyambungkan polyfill melalui import dinamik dan hanya untuk penyemak imbas yang tidak menyokong

elemen:

<dialog open>Hi, I'm a popup!</dialog>

Kesimpulan

HTML5

elemen ialah alat yang agak mudah namun berkuasa untuk melaksanakan tetingkap dan tetingkap timbul. Ia disokong dengan baik oleh penyemak imbas moden dan boleh digunakan dengan jayanya dalam projek berdasarkan kedua-dua vanila JS dan sebarang rangka kerja bahagian hadapan.

Dalam artikel ini, kami membincangkan topik berikut:

• Masalah
  elemen menyelesaikan;
• Interaksi dengan
  API elemen;
• Cara tetingkap dialog berfungsi pada peringkat penyemak imbas;
• Isu biasa dengan modal dan penyelesaiannya;
• Meningkatkan kebolehcapaian
  elemen untuk teknologi bantuan seperti pembaca skrin;
• Meluaskan sokongan penyemak imbas untuk
  elemen.

Akhir sekali, saya menjemput anda untuk menyemak pelaksanaan komponen tetingkap modal dalam JS tulen, yang mengambil kira aspek utama yang dibincangkan dalam artikel: https://codepen.io/alexgriss/pen/abXPOPP

Itu sahaja yang saya ingin kongsikan tentang bekerja dengan

elemen HTML. Saya harap artikel ini memberi inspirasi kepada anda untuk mencuba!