Elemen Dialog HTML: Meningkatkan Kebolehcapaian dan Kemudahan Penggunaan

<dialog>



<p>However, adding the dialog alone won’t do anything to the page. It will show up only once you call the .showModal() method against it.<br>
</p>

<pre class="brush:php;toolbar:false">document.getElementById('example-dialog').showModal();

Kemudian jika anda ingin menutupnya, anda boleh memanggil kaedah .close() pada dialog, atau tekan kekunci escape untuk menutupnya, sama seperti kebanyakan mod lain berfungsi. Juga, perhatikan bagaimana tirai latar muncul yang menggelapkan seluruh halaman dan menghalang anda daripada berinteraksi dengannya. Kemas!

Kebolehcapaian dan pengurusan fokus

Mengendalikan fokus dengan betul adalah penting apabila menjadikan aplikasi web anda boleh diakses oleh semua pengguna. Biasanya anda perlu mengalihkan fokus semasa ke dialog aktif apabila menunjukkannya, tetapi dengan elemen dialog yang dilakukan untuk anda.

Secara lalai, fokus akan ditetapkan pada elemen boleh fokus pertama dalam dialog. Anda boleh menukar elemen mana yang menerima fokus terlebih dahulu dengan menetapkan atribut autofokus pada elemen yang anda mahu fokus mulakan, seperti yang dilihat dalam contoh sebelumnya di mana atribut itu telah ditambahkan pada tutup; elemen.

Menggunakan kaedah .showModal() untuk membuka dialog juga secara tersirat menambahkan peranan ARIA dialog pada elemen dialog. Ini membantu pembaca skrin memahami bahawa mod telah muncul dan skrin supaya boleh bertindak sewajarnya.

Menambah borang pada dialog

Borang juga boleh ditambahkan pada dialog, malah terdapat nilai kaedah khas untuknya. Jika anda menambah elemen dengan kaedah ditetapkan kepada dialog maka borang itu akan mempunyai beberapa gelagat berbeza yang berbeza daripada kaedah dapatkan dan hantar standard.

Pertama sekali, tiada permintaan HTTP luaran akan dibuat dengan kaedah baharu ini. Apa yang akan berlaku sebaliknya ialah apabila borang diserahkan, sifat returnValue pada elemen borang akan ditetapkan kepada nilai butang hantar dalam borang.

Jadi diberikan contoh borang ini:

<dialog>



<p>However, adding the dialog alone won’t do anything to the page. It will show up only once you call the .showModal() method against it.<br>
</p>

<pre class="brush:php;toolbar:false">document.getElementById('example-dialog').showModal();

Setelah respons yang anda inginkan kembali daripada pelayan, anda boleh menutupnya secara manual dengan menggunakan kaedah .close() pada dialog.

Mempertingkatkan tirai latar

Latar belakang di belakang dialog ialah latar belakang kelabu yang kebanyakannya lut sinar secara lalai. Walau bagaimanapun, tirai latar itu boleh disesuaikan sepenuhnya menggunakan ::elemen pseudo latar belakang. Dengan itu, anda boleh menetapkan warna latar belakang kepada sebarang nilai yang anda mahu, termasuk kecerunan, imej, dsb.

Anda juga mungkin mahu membuat mengklik tirai latar mengetepikan modal, kerana ini adalah ciri yang biasa dilaksanakan baginya. Secara lalai,

<form>



<p>The form element with the example-form id will have its returnValue set to Submit.</p>

<p>In addition to that, the dialog will close immediately after the submit event is done being handled, though not before automatic form validation is done. If this fails then the invalid event will be emitted.</p>

<p>You may have already noticed one caveat to all of this. You might not want the form to close automatically when the submit handler is done running. If you perform an asynchronous request with an API or server you may want to wait for a response and show any errors that occur before dismissing the dialog.</p>

<p>In this case, you can call event.preventDefault() in the submit event listener like so:<br>
</p>

<pre class="brush:php;toolbar:false">exampleForm.addEventListener('submit', (event) => {
  event.preventDefault();
});

dialog.addEventListener('click', (event) => {
  if (event.target === dialog) {
    dialog.close();
  }
});