Ganti dialog JavaScript dengan dialog HTML baru

Ucapkan selamat tinggal kepada kotak dialog JavaScript dan merangkul HTML<dialog></dialog> elemen! Artikel ini akan menunjukkan cara menggunakan HTML<dialog></dialog> Unsur -unsur dan kelas JavaScript menggantikan kotak dialog JavaScript tradisional ( alert() , confirm() , dan prompt() ) dan meningkatkan pengalaman dan akses pengguna.

Adakah anda bosan dengan gaya yang membosankan dan kefungsian terhad dialog JavaScript? Walaupun mereka mudah, mereka mempunyai kekurangan dalam kebolehcapaian, penyesuaian gaya dan pemodenan. Artikel ini akan memberikan alternatif yang lebih fleksibel dan berkuasa.

Saya telah menggunakan panggilan API dan dialog JavaScript dalam projek untuk mengumpul maklum balas pengguna. Menunggu pemaju lain selesai<modal></modal> Semasa pembangunan komponen, saya menggunakan alert() , confirm() dan prompt() . Contohnya:

 const deleteLocation = sahkan ('Padam lokasi?');
jika (penghapusan) {
  amaran ('lokasi dipadam');
}

Pada masa ini, saya menyedari alert() , confirm() dan prompt() datang dengan banyak ciri tetingkap modal yang sering diabaikan:

1. Tingkap Modal Benar: Sentiasa di atas timbunan, walaupun di z-index: 99999;<div> Di atas.<li> <strong>Akses Papan Kekunci:</strong> Tekan ENTER untuk mengesahkan, tekan melarikan diri untuk membatalkan.</li> <li> <strong>Skrin Pembaca Mesra:</strong> Pindah Fokus dan Benarkan Membaca Kandungan Tetingkap Modal.</li> <li> <strong>Focus Capture:</strong> Menekan kekunci Tab tidak melompat ke mana -mana elemen yang fokus pada halaman utama (tetapi di Firefox dan Safari, tumpuan melompat ke penyemak imbas UI.</li> <li> <strong>Sokongan untuk Keutamaan Pengguna:</strong> Mod cahaya dan gelap disokong keluar dari kotak.</li> <li> <strong>Jeda Kod Pelaksanaan:</strong> Tunggu input pengguna.</li> <p> Kaedah JavaScript ini memenuhi keperluan saya dalam 99% kes. Jadi, mengapa saya tidak (dan pemaju web lain) sering menggunakannya? Mungkin kerana mereka kelihatan seperti kesilapan sistem dan tidak boleh digayakan. Satu lagi pertimbangan penting ialah mereka secara beransur -ansur ditutup. Yang pertama adalah untuk mengeluarkannya dari iframe domain silang, yang dikatakan sepenuhnya dikeluarkan dari platform web pada masa akan datang, walaupun pelan ini nampaknya dijeda.</p> <p> Dengan ini, apakah alternatif yang perlu kita gantikan <code>alert() , confirm() , dan prompt() ? Anda mungkin pernah mendengar tentang html<dialog></dialog> Unsur -unsur, artikel ini akan memberi tumpuan kepada cara menggunakannya bersempena dengan kelas JavaScript.

   Walaupun mustahil untuk menyalin sepenuhnya fungsi penuh kotak dialog JavaScript, jika kita<dialog></dialog> Kaedah showModal() digunakan bersempena dengan janji (janji boleh menyelesaikan (menerima) atau menolak (membatalkan)), jadi kita boleh mendapatkan fungsi yang hampir sama. Melangkah lebih jauh, mari kita lakukan untuk html<dialog></dialog> Elemen menambah kesan bunyi, seperti dialog sistem sebenar!

   Jika anda ingin melihat demo sekarang, lawati di sini.

   Kelas Dialog JavaScript

   Pertama, kita memerlukan kelas JavaScript asas yang mengandungi objek Tetapan yang akan digabungkan dengan tetapan lalai. Tetapan ini akan digunakan untuk semua dialog melainkan anda menulis ganti mereka apabila dipanggil (lebih banyak lagi pada kemudian).

    Dialog kelas lalai eksport {
     pembina (tetapan = {}) {
       this.settings = object.assign (
         {
           / * Tetapan lalai - lihat penerangan di bawah */
         },
         tetapan
       );
       this.init ();
     }
     // ...
   }

   Tetapan termasuk:

   • accept : Label butang "Terima".
   • bodyClass : Kotak dialog dibuka dan penyemak imbas tidak menyokongnya<dialog></dialog> Apabila ditambah ke kelas CSS elemen.
   • cancel : Label butang "Batal".
   • dialogClass : tambah ke<dialog></dialog> Kelas CSS adat untuk elemen.
   • message :<dialog></dialog> Kandungan dalaman.
   • soundAccept : URL fail audio yang dimainkan pengguna semasa mengklik butang "Terima".
   • soundOpen : URL fail audio yang dimainkan pengguna apabila kotak dialog dibuka.
   • template : Templat HTML pilihan, disuntik ke dalam<dialog></dialog> tengah.

   Templat permulaan dan pengesanan sokongan penyemak imbas

   Dalam kaedah init , kami akan menambah fungsi penolong untuk mengesan HTML penyemak imbas<dialog></dialog> Sokongan untuk Unsur dan Tetapkan HTML Asas:

    init () {
     // ujian<dialog> Menyokong this.dialogsupported = typeof htmldialogelement === 'function';
     this.dialog = document.createElement ('dialog');
     this.dialog.dataset.component = this.dialogsupported?
     this.dialog.role = 'dialog';
   
     // templat html this.dialog.innerHtml = `
       <fieldset data-ref="fieldset" role="document">
   <legend data-ref="message"></legend>
   <div data-ref="template"></div>
   </fieldset>
   <menu></menu> `;
   
     document.body.appendchild (this.dialog);
     // ...
   }</dialog>

   Pasangan penyemak imbas<dialog></dialog> Keadaan sokongan berbeza -beza, jadi kita perlu melakukan pengesanan dan menyediakan penyelesaian sandaran.

   (Langkah -langkah berikutnya adalah serupa dengan teks asal, dan panjangnya terlalu panjang. Beberapa butiran kod ditinggalkan di sini, tetapi coretan logik dan kod utama dikekalkan, dan bahasa itu digilap dan diselaraskan.)

   ... (Tinggalkan beberapa butiran kod, termasuk rujukan node dom, atribut butang, membatalkan peristiwa butang, polyfills yang tidak menyokong penyemak imbas, navigasi papan kekunci, paparan<dialog></dialog> , menunggu input pengguna, bersembunyi<dialog></dialog> , pemprosesan fokus, tambahkan kaedah alert , confirm dan prompt , gaya asynchronous/menunggu, gaya penyemak imbas, contoh dialog tersuai, dll) ...

   Meringkaskan

   Melalui penyelesaian yang disediakan dalam artikel ini, anda boleh menggunakan lebih banyak HTML moden dan fleksibel<dialog></dialog> Unsur -unsur menggantikan dialog JavaScript tradisional untuk meningkatkan pengalaman pengguna dan akses aplikasi. Ingatlah untuk menyesuaikan gaya dan fungsi mengikut keperluan khusus anda untuk membuat dialog tersuai yang paling sesuai dengan anda.