Gunakan elemen dialog asli HTML5 dan buat komponen modal dengan mudah

Draf HTML 5.2 menambahkan elemen dialog baru. Tapi ini adalah teknik eksperimental.

Sebelumnya, jika kita ingin membuat dialog modal atau kotak dialog apa pun, kita perlu memiliki latar belakang, tombol tutup, mengikat peristiwa di kotak dialog, mengatur markup kita sedemikian rupa, menemukan cara untuk menyampaikan pesan. untuk berbicara...ini sungguh rumit. Elemen dialog menyelesaikan semua masalah di atas.

Berikut ini adalah struktur html dari kotak modal bootstrap:

 <!-- Tombol memicu kotak modal--><button class=btn btn-primary btn-lg data-toggle=modal data-target=#myModal> Mulai mendemonstrasikan kotak modal</button><!-- Modal Box (Modal ) --><div class=modal fade id=myModal tabindex=-1 role=dialog aria-labelledby=myModalLabel aria-hidden=true> <div class=modal-dialog> <div class=modal-content> <div class=modal-header> <button type=button class=close data-dismiss=modal aria-hidden=true> </button> <h4 class =modal-title id=myModalLabel> Judul modal</h4> </div> <div class=modal-body> Tambahkan beberapa teks di sini</div> <div class=modal-footer> <button type=button class=btn btn-default data-dismiss=modal>Tutup</button> <button type=button class=btn btn-primary> Kirim perubahan</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --></div>

Berikut ini adalah struktur HTML dari kotak modal asli:

 <!-- Tombol memicu kotak modal--><button type=button class=btn>Tampilkan kotak modal</button><!-- Kotak modal--><dialog terbuka> Kotak modal asli HTML5</ dialog>

Kita telah melihat markup elemen dialog yang paling sederhana, dan Anda mungkin memperhatikan bahwa open adalah atribut pada dialog di atas. Menambahkan atribut ini ke elemen akan memaksa dialog muncul, jika tidak maka dialog akan dihapus. Dialog juga akan diposisikan secara mutlak di halaman.

Gambar di atas menunjukkan gaya kotak modal dasar.

Buka browser dan Anda dapat melihat gaya dasarnya seperti ini:

 dialog { tampilan: blok; posisi: absolut; kiri: 0px; kanan: 0px; lebar: -webkit-fit-content; tinggi: -webkit-fit-content; gaya batas: padat; warna batas: awal; gambar batas: awal; bantalan: 1em;

Elemen dialog juga memperkenalkan pseudo-class selector::backdrop. Gaya ::backdrop default yang dilihat melalui browser adalah sebagai berikut:

 dialog::latar belakang { posisi: tetap; atas: 0px; kanan: 0px; bawah: 0px; kiri: 0px;

Kita dapat menata elemen dialog seperti elemen HTML lainnya, dan hampir semua gaya CSS bisa digunakan. Melalui pemilih kelas semu ::backdrop, kita dapat menggunakannya untuk mengatur gaya latar belakang.

Misalnya:

 dialog{ margin-top:200px; lebar:250px; tinggi:250px; perataan teks:tengah; tinggi garis:250px; radius batas: 4px batas: tidak ada; :latar belakang { latar belakang: rgba(hitam, .5);}

Efek gaya di atas adalah sebagai berikut:

Di bawah ini adalah kotak dialog dasar yang tidak menampilkan apa pun secara visual karena atribut open tidak disetel. Anda perlu menggunakan JavaScript API untuk menampilkan/menyembunyikannya:

 <dialog>Ini adalah kotak dialog! </dialog>

API .show() dan .close() dari elemen dialog masing-masing akan menampilkan dan menutup kotak dialog. Dengan menggunakan kedua API ini pada elemen DOM, Anda dapat menampilkan dan menutup kotak dialog.

Misalnya:

 <!-- HTML --><dialog> <p>Ini adalah kotak dialog! </p> <button id=close>Tutup kotak dialog</button></dialog><button id=show>Tampilkan kotak dialog</button> <!-- script --> <script> var dialog = dokumen. querySelector(dialog); dokumen.querySelector(#show).onclick = function(){ dialog.close(); };</skrip>

Anda dapat meneruskan parameter ke dialog.close(). Dengan mendengarkan kejadian close dari elemen dialog, properti dialog.returnValue akan mengembalikan nilai yang diberikan.

menyukai:

 <!--HTML--><dialog> <p>Ini adalah kotak dialog! </p> <p><input type=text id=return_value value= placeholder=Silakan masukkan konten/></p> <button id=close>Tutup kotak dialog</button></dialog><button id=show >Tampilkan kotak dialog</button><!--script--><script> var dialog = document.querySelector(dialog); document.querySelector(#show).onclick = function(){ dialog.showModal(); }; document.querySelector(#close).onclick = function(){ var val = document.querySelector(#return_value).value; elemen tutup acara dialog.addEventListener(close, function(){ alert(this.returnValue); });</script>

API lain untuk menampilkan kotak dialog adalah .showModal()

Jika Anda tidak ingin pengguna berinteraksi dengan objek elemen halaman selain kotak dialog, gunakan .showModal() untuk membuka kotak dialog alih-alih menggunakan .show(). Kotak dialog yang dibuka dengan .showModal() akan memiliki lapisan latar belakang tembus jendela penuh, menghalangi pengguna berinteraksi dengan objek elemen halaman di luar kotak dialog secara default (tengah atas, bawah, kiri, dan kanan) ); dan kotak dialog yang dibuka dengan .show() akan ditampilkan di bagian atas jendela secara default (tampilan tengah dapat dicapai melalui css).

Setelah menutup kotak dialog, close memicu suatu peristiwa. Selain itu, pengguna dapat menutup kotak dialog modal dengan memasukkan tombol Escape. Ini akan mengaktifkan acara pembatalan yang dapat Anda batalkan menggunakan event.preventDefault().

Anda dapat menggunakan form[method=dialog] untuk mengintegrasikan formulir dengan elemen <dialog>. Setelah formulir dikirimkan, ia menutup dialog dan menetapkan dialog.returnValue ke nilai tombol kirim yang digunakan.

Selain itu, Anda bisa menggunakan properti fokus otomatis untuk secara otomatis fokus pada kontrol formulir dalam kotak dialog ketika muncul.

Misalnya:

 <!--HTML--><dialog id =dialog> <form method =dialog> <p>Apakah Anda setuju dengan Ketentuan Penggunaan? </p> <p><textarea class =form-control dinonaktifkan>Syarat dan persyaratan...</textarea></p> <button type =kirim nilai =Ya>Ya</button> <button type =kirim nilai = Tidak ada fokus otomatis>Tidak</button> </form></dialog><button id=show>Tampilkan dialog formulir</button><!--script--><script> var dialog = document.querySelector(dialog) ; document.querySelector(#show).onclick = function(){ dialog.showModal() }; //Dengarkan event penutupan elemen dialog dialog.addEventListener(close, function(e){ if(this.returnValue = == Ya ){ alert(this.returnValue) //melakukan sesuatu... }else{ alert(this.returnValue) //melakukan sesuatu... });</script>

Di antara browser desktop, hanya Google Chrome yang mendukung fungsionalitas dialog secara penuh (pada saat postingan blog ini dibuat). Untuk mencapai kompatibilitas lintas browser, gunakan dialog-polyfill.

<iframe src=//caniuse.com/dialog/embed scrolling=noallowtransparency=trueallowfullscreen=true frameborder=0></iframe>

Artikel referensi: Demonstrasi elemen dialog

perpustakaan fungsi biasanya: https://github.com/JofunLiang/biasanyajs

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.