JQuery UI Part 6 : Membuat Modal Dialog Dengan JQuery UI

JQuery UI

Malas Ngoding

JQuery UI Part 6 Membuat Modal Dialog Dengan JQuery UI

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.

Incoming search terms:

  • cara membuat pop up
  • car membuat kotak dialig dengan javascript di php mysql
  • cara buat pop-up
  • cara membuat modal dengan jquesry
  • membuat jquery dialog
  • membuat dialog konfirmasi di web
  • koding membuat kotak dialog dengan php dan mysql
  • dialog popup simpel terbaru
  • cara membuat dialog dengan jquery
  • membuat notif dengan modal jquery



5 Comment

  • Angga

    Gan mau nanyak cara buat category untuk posting web dengan php gimana ya

    • admin

      buat table category sama table posting. ntar di table posting buatin column category. datanya ambil dari id category. ntar saya buat deh tutorial nya

      • Angga

        Oke gan saya tunggu, Terima Kasih

  • mauf

    gan. bleh request tutorial ?

Write a Comment

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