Modal dialog Popver API VS : Sama Sama tetapi Berbeza

• Timbul timbul modal yang memerlukan tumpuan pengguna
• Kebolehaksesan dan interaksi papan kekunci

Pilih popover untuk:

• Timbul timbul bukan modal dengan penyingkiran ringan
• Pelaksanaan yang mudah dengan kod minimum

unsur

Menurut elemen MDN The Dialog

Elemen HTML mewakili kotak dialog modal atau bukan modal atau komponen interaktif lain, seperti amaran yang boleh ditolak, pemeriksa atau subtingkap.

A biasanya digunakan dan dipaparkan di atas kandungan apabila tapak web perlu menarik perhatian pengguna kepada sesuatu yang penting. iaitu Melanggan surat berita, meminta (lebih seperti memaksa) untuk melumpuhkan penyekat iklan, atau menerima terma dan syarat.

elemen sebagai Modal

Seperti yang mungkin anda temui berbilang kali di beberapa tapak web, beberapa tetingkap timbul ini akan dilukis pada keseluruhan skrin anda sambil mengaburkan latar belakang atau melumpuhkan latar belakang dan memfokuskan pengguna hanya pada tugas yang sedang dijalankan, pengguna mesti sama ada mengetepikan (hanya jika dibenarkan) pop timbul atau masukkan maklumat yang diperlukan untuk hilang. Tingkah laku ini dipanggil 'elemen sebagai modal'. Elemen Modal ini ditunjukkan di lapisan atas halaman.

//To open dialog as a modal.

dialog.showModal();

// To close the dialog.

dialog.close();

apabila ditunjukkan menggunakan kaedah showModal() boleh diketepikan menggunakan kekunci esc. Pengguna papan kekunci mengharapkan tingkah laku sedemikian yang perlu dikekalkan dan disediakan oleh penyemak imbas. Jika berbilang dialog modal dibuka, hanya dialog terakhir akan ditutup menggunakan kekunci esc.

elemen sebagai bukan modal

Anda mungkin tidak sentiasa mahu menghentikan aliran semula jadi pengguna menggunakan halaman web anda, berhenti melakukan semua perkara lain dan fokus pada perkara yang anda mahu tunjukkan tetapi tetap kandungan anda, seperti pemberitahuan roti bakar, persetujuan kuki atau petua alat umum info. harus muncul di lapisan atas halaman, di atas mana-mana kandungan lain yang boleh atau tidak boleh berinteraksi dengan pengguna. Jenis pop timbul ini dipanggil pop timbul bukan modal. Pengguna boleh mengetepikan ini secara manual atau secara amnya masa dan akan hilang dengan sendirinya. Dialog bukan modal ini masih ditunjukkan pada lapisan atas halaman tetapi keutamaannya boleh dikawal menggunakan indeks z dan elemen modal akan mengambil indeks z yang lebih tinggi daripada ini dan akan menjadikan ini tidak boleh diakses.

//To open dialog as a modal.

dialog.show();

// To close the dialog.

dialog.close();

Contoh Kod

Beberapa Isu

Saya mengalami kesukaran untuk memahami cara kerja dan penggunaan elemen bukan modal. Menurut saya elemen bukan modal berkelakuan tidak konsisten dan memerlukan kod Javascript untuk mengendalikan situasi seperti:

• Tiada fungsi penyingkiran cahaya. Mengklik di luar model tidak akan menutup .
• kunci esc tidak mengetepikan dan memerlukan Javascript untuk mengendalikan senario itu.
• perlu mengurus z-index secara manual jika anda mahu melukis lapisan atas.

Terkejut saya popover API menjawab atau membetulkan isu ini dan banyak lagi....

API popover

popover ialah atribut yang boleh ditambah pada mana-mana atribut HTML. Ini contohnya.

<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>

Perbezaan utama antara popover dan

unsur

Perbezaan utama antara popover dan