Cara Membuat Kotak Dialog Kustom di AJAX untuk Pemrograman HTML5 dan CSS3 - dummies

AJAX memungkinkan pemrogram HTML5 dan CSS3 membuat kotak dialog ubahsuaian. JavaScript memasok beberapa kotak dialog (kotak dialog waspada dan prompt), tapi ini cukup jelek dan relatif tidak fleksibel. UI jQuery mencakup teknik untuk mengubah div menjadi kotak dialog virtual. Kotak dialog mengikuti tema dan resizable dan movable.

Membangun kotak dialog tidak sulit, namun Anda harus bisa menyalakan dan mematikannya dengan kode, atau tidak akan bertindak seperti kotak dialog yang tepat (yang meniru sebuah jendela dalam operasi sistem):

1. Buat div yang ingin Anda gunakan sebagai kotak dialog.

   Buat div dan beri ID sehingga Anda bisa mengubahnya menjadi kotak dialog simpul. Tambahkan atribut judul, dan judulnya muncul di bilah judul kotak dialog.

   Kelas dialog memungkinkan Anda memiliki kotak dialog ubahsuaian yang dapat dipindahkan dan sesuai dengan tema halaman yang terinstal.
   

2. Balikkan div ke dalam kotak dialog.

   Gunakan metode dialog () untuk mengubah div menjadi jQuery kotak dialog simpul di init () fungsi:

   $ ("# dialog"). dialog();
   

3. Sembunyikan kotak dialog secara default.

   Biasanya Anda tidak ingin kotak dialog terlihat sampai terjadi peristiwa semacam itu. Dalam contoh khusus ini, Anda mungkin tidak ingin kotak dialog muncul sampai pengguna mengeklik tombol. Anda bisa meletakkan beberapa kode untuk menutup kotak dialog di fungsi init () sehingga kotak dialog tidak akan muncul sampai dipanggil.

4. Tutup kotak dialog.

   Untuk menutup kotak dialog, lihat kotak dialog dan panggil dialog () metode di atasnya lagi. Kali ini, kirim nilai tunggal "close" sebagai parameter, dan kotak dialog akan segera ditutup:

   // awalnya close dialog $ ("# dialog"). dialog ("close");
   

5. Mengeklik X secara otomatis akan menutup kotak dialog.

   Kotak dialog memiliki X kecil yang terlihat seperti ikon Close Window pada kebanyakan sistem windowing. Pengguna dapat menutup kotak dialog dengan mengklik ikon ini.

6. Anda dapat membuka dan menutup kotak dialog dengan kode.

   Tombol Dialog Buka dan Dial Dial Terbuka Saya memanggil fungsi yang mengontrol perilaku kotak dialog. Sebagai contoh, di sini adalah fungsi yang melekat pada tombol Open Dialog:

   function openDialog () {$ ("# dialog"). dialog ("open");} // akhiri openDialog