Modal dialog Popver API VS : Sama Sama tetapi Berbeza-tutorial js-php.cn

Popver API VS dialog Modal : Same Same but Different

Saya sedang membaca beberapa blog berita teknologi dan terjumpa tajuk Popover API mendarat di Baseline. Saya keliru, semasa saya menyelami pembangunan front-end baru-baru ini, saya baru-baru ini dengan masa yang sukar untuk membiasakan diri menggunakan Elemen dalam HTML. Semasa melayari blog saya sentiasa keliru tentang bagaimana saya menggunakan elemen itu sehingga sekarang.

TL;DR

Pilih

untuk:

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();

Salin selepas log masuk

Elemen

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();

Salin selepas log masuk

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>

Salin selepas log masuk

Perbezaan utama antara popover dan unsur

Perbezaan utama antara popover dan

elemen ialah popover sentiasa bukan modal. elemen datang dengan atribut role=dialog atribut peranan ini dilampirkan pada pelbagai elemen HTML dan berkelakuan dengan cara tertentu. iaitu h1 mempunyai peranan tajuk a mempunyai peranan anchor/Link. Peranan ini digunakan untuk menentukan dan membantu teknologi bantuan seperti pembaca skrin untuk menentukan elemen. Walau bagaimanapun, popover ialah atribut kepada elemen HTML kerana ia tidak mempunyai peranan lalai yang dilampirkan padanya. Ini membantu

dalam contoh di atas untuk disembunyikan sehingga butang diklik.

Atribut popover boleh digunakan dengan kod minimum dan sementara ia boleh dikawal menggunakan Javascript, ia tidak diperlukan pada setiap masa seperti

ポップオーバーには 2 つの特性があります:
1.popover=auto: ライト解除の機能があり、JS インタラクションは必要ありません。
2.popover=manual: 明示的に閉じるには、ボタンやタイマーをクリックするなどの Javascript インタラクションが必要です。

ポップオーバーは常に最上位レイヤーに表示され、z-index を明示的に設定する必要はありません。

コード例:

JavaScript コードをほとんど使わずに同じ動作を実現できることがわかります。さまざまなポップオーバーのデザインと管理がはるかに簡単になります。

設計上の考慮事項

ポップオーバーには、CSS を使用して背景を設定できます。これは、ポップオーバーの背景をぼかしたりグレーアウトしたりするために使用できますが、ポップオーバーのライト解除機能を奪うことはなく、ポップオーバーの場合でもユーザーは外側をクリックできます。を起動して、Web ページの他の要素と対話します。ではなくポップオーバーをいつ選択するかを決定するときは、非常に注意する必要があります。

ここで考慮すべき主な点は、現時点でフォーカスが必要なのは、表示されているコンポーネントだけかどうかということです。ユーザーは他のものと対話することを許可できますか?

結論

結論として、この要素とポップオーバー API は、Web アプリケーションでインタラクティブなポップアップを作成するための多彩なオプションを提供します。それらの独特の特性とユースケースを理解することで、情報に基づいた意思決定を行い、ユーザーエクスペリエンスを向上させ、開発プロセスを合理化できます。

参考文献

Popover API と要素の比較
ダイアログとポップオーバーは似ているように見えます。どう違うのですか?
Popover API がベースラインに到達

Atas ialah kandungan terperinci Modal dialog Popver API VS : Sama Sama tetapi Berbeza. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!