membuat modal dialog dengan jquery

Membuat modal dialog dengan JQuery (Tanpa Plugin)


Membuat modal dialog dengan JQuery – halo apa kabar.. pada kesempatan kali ini saya akan membagikan tutorial untuk membuat modal dialog dengan JQuery. dan tanpa menggunakan plugin yang banyak tersedia untuk membuat modal dialog. tapi kali ini kita akan membuat modal dialog sederhana tanpa menggunakan plugin tersebut dengan tujuan untuk memahami cara kerja dalam membuat modal dialog. pada tutorial-tutorial sebelumnya kita saya telah membahas tentang tutorial-tutorial jquery dasar. teman-teman bisa melihatnya DI SINI untuk tutorial dasar jquery yang telah saya buatkan.

Tutorial JQuery lainnya :

Membuat modal dialog dengan JQuery (Tanpa Plugin)

Cara membuat modal dialog dengan jquery yang pertama kali harus di pahami adalah tentang event dan effect jQuery.

Pertama teman-teman siapkan dulu library jQuery nya. download di situs resmi nya aja biar jelas. klik di sini. setelah selesai mendownload library jquery nya selanjutnya kita buatkan file html dan css nya.

index.html

style.css

Membuat modal dialog dengan JQuery

coba di perhatikan pada syntax di atas. jadi intinya modal yang sudah kita buat kita sembunyikan dulu dengan menetapkan “display:none” pada css. dan kita buat event click pada tombol agar pada saat tombol di klik maka akan memunculkan modal dialog yang tadinya kita sembunyikan dengan css. jadi intinya sederhana saja. kita berikan event klik pada tombol dan effect fadeIn untuk menampilkan modal.

lalu kemudian pada tombol-tutup kita juga memberikan event klik. agar ketika di klik modal di sembunyikan dengan menggunakan effect fadeOut() agar lebih menarik. hehe sekarang coba jalankan file index.html

membuat modal dialog dengan jquery

membuat modal dialog dengan jquery

lalu klik pada tombol

cara membuat modal dialog dengan jquery

cara membuat modal dialog dengan jquery

Pengertian modal dialog

Sedikit tambahan mungkin ada di antara teman-teman yang belum mengetahui untuk apa sih modal dialog, kapan sih bisa di gunakan. sebenarnya tidak ada ketentuan khusus tentang penggunaan modal pada sebuah website atau aplikasi. tergantung dari keinginan dan design sebuah website atau aplikasi. biasanya modal dialog di gunakan untuk membuat pesan peringatan, pesan informasi yang bisa di tujukan pada si user. dan bisa juga di gunakan untuk membuat form login dalam bentuk modal dialog. jadi terserah pada teman-teman pribadi kapan ingin menggunakan modal dialognya.

sekian dulu tutorial Membuat modal dialog dengan JQuery (Tanpa Plugin). semoda dapat bermanfaat untuk teman-teman yang ingin belajar membuat modal dialog dengan menggunakan jQuery tapi tidak ingin menggunakan plugin yang sudah banyak tersedia.

Incoming search terms:

  • Membuat modal dengan jquery
  • cara menampilkan modal dwngan jquery
  • Membuat modal jquery
  • membuat modals di jquery
  • cara membuat modal box
  • cara membuat modal dialog css
  • modal form php download
  • cara membuat modal ajax
  • cara membuat messages poup up
  • cara buat modal css




About the author
Diki Alfarabi Hadi

Bos in www.malasngoding.com. 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
  • 2 Comments

Write a Comment

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