Cara Menampilkan Kotak Dialog Dengan jQuery UI

29/09/2015    Ekky Ridyanto    2926     Website

Salah satu komponen yang menarik pada jQuery UI lainnya adalah fitur dialog. Kita akan belajar bagaimana membuat sebuah dialog dengan jQuery UI. Biasanya untuk menampilkan pesan singkat atau memberikan informasi ke pengunjung kita bisa melalui pop up alert atau confirm pada javascript. Tapi dengan jQuery UI kita bisa membuat kotak dialog yang inovatif bisa didrag dan resize. Content dialog bisa berupa text, gambar atau form login dimana cara ini lebih modern dan lebih keren hasilnya yaitu menggunakan kotak dialog dari jQuery UI. Oke kita mulai dalam pembuatannya. Pertama membuat design kerangka yakni membuat sebuah button atau tombol pada HTML sebagai berikut

Kemudian saya akan membuat sebuah event click dimana untuk menampilkan kotak dialog ketika button ditekan.

Hasil dari skrip diatas adalah seperti tampak pada gambar berikut :

lalu teman teman bisa tambahkan sebuah tombol didalam kotak dialog tersebut caranya mudah teman teman tinggal berikan option seperti ini.

Untuk menambahkan effect teman teman hanya menambahkan option-option sebagai berikut

Penjelasan kode diatas :
opsi position untuk mengatur letak kotak dialog sedangkan opsi modal:true untuk membuat background belakang menjadi terlihat transparan. Menentukan opsi draggable:false dan resizable:false akan menonaktifkan fitur draggable dan resizable pada kotak dialog dan secara default dialog bisa didrag dan diresize. Oke selamat mencoba. Terima kasih

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More