JQuery UI Part 6 : Membuat Modal Dialog Dengan JQuery UI


JQuery UI Part 6 : Membuat Modal Dialog Dengan JQuery UI – Pada tutorial jquery ui part 6 ini saya akan membahas tentang salah satu widget yang paling banyak di gunakan di jquery ui. yaitu cara membuat widget modal dialog dengan JQuery UI. Modal dialog merupakan fitur pada website yang berbentuk pop up. modal dialog memiliki banyak sekali manfaat. modal dialog dapat kita manfaatkan menjadi form login dalam bentuk pop up, pesan notifikasi, form data dan banyak lagi kegunaan dari modal dialog yang nantinya akan teman-teman rasakan sendiri setelah teman-teman membuat modal dialog. baik itu modal dialog yang teman-teman buat dengan css, jquery bahkan dengan menggunakan plugin jquery lainnya. untuk panduan lengkap cara membuat modal dialog dengan jquery ui teman-teman bisa membacanya di situs resmi jquery ui di sini.

Baca juga :

JQuery UI Part 6 : Membuat Modal Dialog Dengan JQuery UI

Langsung saja kita masuk ke tutorial cara membuat modal dialog dengan jquery ui. jquery ui menyediakan fungsi untuk membuat modal dialog. yaitu fungsi dialog(). dan jquery ui juga menyediakan berbagai macam modal dialog yang dapat kita buat. yaitu modal yang berisi form, modal berisi pesan dan pesan konfirmasi. langsung saja

dialog.html

style.css

jika teman-teman belum membaca tutorial sebelumnya tentang cara menghubungkan jquery dan jquery ui bisa baca di sini. saya jelaskann sedikit. pertama kita hubungkan dulu ke file jquery dan jquery ui. css jquery ui juga.

lalu membuat modal dialog dengan mengisi isi dari modal yang ingin di buat

di sini saya membuat modal dengan memberikan id “kotak-dialog” dan mengisi tittle dari modal yang saya buat dengan tulisan “ini heading modal” di atribut tittle. kita juga harus membuat sebuah tombol untuk penampil dari modal dialog. jadi ketika tombol di klik maka akan menampilkan dialog. JQuery UI Part 6 : Membuat Modal Dialog Dengan JQuery UI

selanjutnya dengan memberikan aksi dengan fungsi dialog() yang telah di sediakan jquery ui untuk  membuat modal dialog. di sini saya membuat modal dengan effect animasi.

pada saat tombol yang ber id tombol di klik maka modal yang ber id kotak-dialog akan di tampilkan. pengaturan dari animasi modal nya bisa teman-teman terapkan sendiri di sini dengan memberikan effectnya pada effect. dan pada durationnya masukkan nilai durasi dari effect modal yang kita inginkan. JQuery UI Part 6 : Membuat Modal Dialog Dengan JQuery UI

jalankan dan klik pada tombol.

jquery ui part  6 membuat modal dialog dengan jquery ui

jquery ui part 6 membuat modal dialog dengan jquery ui

Sekian tutorial JQuery UI Part 6 : Membuat Modal Dialog Dengan JQuery UI. semoga bermanfaat.

See the Pen Membuat Modal Dialog Dengan JQuery UI by Malas Ngoding (@malasngoding) on CodePen.0

Incoming search terms:

  • cara membuat pop up sederhana
  • cara bikin pop up sederhana
  • cara buat dvd pop up
  • cara membuat popup ulang tahun
  • membuat dialog dengan jquery
  • mwmbuat modal dengan jquery
  • tutorial membuat pop up
  • tutorial membuat pop up abstrak




About the author
Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.


Discussion
  • 5 Comments

Write a Comment

Your email address will not be published. Required fields are marked *