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

Video: Animasi Menggunakan JQuery part 3 Membuat kotak dialog FULL MUSIC 2024

AJAX membolehkan pemrogram HTML5 dan CSS3 membuat kotak dialog tersuai. JavaScript menyediakan beberapa kotak dialog (kotak dialog amaran dan segera), tetapi ini agak hodoh dan agak tidak fleksibel. UI jQuery termasuk teknik untuk menjadikan mana-mana div menjadi kotak dialog maya. Kotak dialog mengikuti tema dan resizable dan alih.

Membina kotak dialog tidak sukar, tetapi anda perlu mengaktifkan dan mematikannya dengan kod, atau ia tidak akan bertindak seperti kotak dialog yang betul (yang meniru tetingkap dalam operasi sistem):

Buat div yang anda hendak gunakan sebagai kotak dialog.

Buat div dan berikannya ID supaya anda boleh mengubahnya menjadi nod kotak dialog. Tambah tajuk atribut, dan tajuk muncul dalam bar tajuk kotak dialog.
```
Kelas dialog membolehkan anda mempunyai kotak dialog tersuai yang boleh diubah dengan konsisten dengan tema halaman yang dipasang.
```
Hidupkan div menjadi kotak dialog.

Gunakan kaedah dialog () untuk menjadikan div menjadi nod kotak dialog jQuery dalam fungsi init ():
```
$ ("# dialog"). dialog ();
```
Sembunyikan kotak dialog secara lalai.

Biasanya anda tidak mahu kotak dialog kelihatan sehingga beberapa jenis peristiwa berlaku. Dalam contoh khusus ini, anda mungkin tidak mahu kotak dialog muncul sehingga pengguna mengklik butang. Anda boleh meletakkan beberapa kod untuk menutup kotak dialog dalam fungsi init () supaya kotak dialog tidak akan muncul sehingga dipanggil.
Tutup kotak dialog.

Untuk menutup kotak dialog, rujuk kepada nod kotak dialog dan panggil kaedah dialog () di atasnya sekali lagi. Kali ini, hantar nilai tunggal "dekat" sebagai parameter, dan kotak dialog akan segera tutup:
```
// pada mulanya dialog dekat $ ("# dialog"). dialog ("tutup");
```
Mengklik X secara automatik menutup kotak dialog.

Kotak dialog mempunyai X kecil yang kelihatan seperti ikon Tetingkap Tutup pada kebanyakan sistem windowing. Pengguna boleh menutup kotak dialog dengan mengklik ikon ini.
Anda boleh membuka dan menutup kotak dialog dengan kod.

Dialog Saya Buka dan Tutup butang Dialog memanggil fungsi yang mengawal kelakuan kotak dialog. Sebagai contoh, di sini adalah fungsi yang dilampirkan pada butang Dialog Terbuka:
```
fungsi openDialog () {$ ("# dialog"). dialog ("terbuka"); // end openDialog
```