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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html> <head> <title>JQuery UI Part 6 : Membuat Modal Dialog Dengan JQuery UI</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="js/jquery-ui/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Membuat Modal Dialog Dengan JQuery UI | www.malasngoding.com</h1> <!-- modal dialog --> <div id="kotak-dialog" title="INI HEADING MODAL"> <p> SELAMAT DATANG DI WWW.MALASNGODING.COM <BR/> TUTORIAL CARA MEMBUAT MODAL DIALOG DENGAN JQUERY UI </p> </div> <!-- akhir modal dialog --> <!-- tombol yang menampilkan modal dialog jika di klik --> <button id="tombol">KLIK SAYA !!</button> <!-- akhir tombol --> </body> <script type="text/javascript"> $(document).ready(function(){ $( "#kotak-dialog" ).dialog({ autoOpen: false, show: { effect: "blind", duration: 1000 }, hide: { effect: "explode", duration: 1000 } }); $( "#tombol" ).click(function() { $( "#kotak-dialog" ).dialog( "open" ); }); }); </script> </html> |
style.css
|
1 2 3 4 5 6 7 |
body{ font-family: sans-serif; } h1{ text-align: center; } |
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.
|
1 2 3 |
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="js/jquery-ui/jquery-ui.css"> |
lalu membuat modal dialog dengan mengisi isi dari modal yang ingin di buat
|
1 2 3 4 5 6 7 8 9 10 |
<!-- modal dialog --> <div id="kotak-dialog" title="INI HEADING MODAL"> <p> SELAMAT DATANG DI WWW.MALASNGODING.COM <BR/> TUTORIAL CARA MEMBUAT MODAL DIALOG DENGAN JQUERY UI </p> </div> <!-- akhir modal dialog --> <!-- tombol yang menampilkan modal dialog jika di klik --> <button id="tombol">KLIK SAYA !!</button> <!-- akhir tombol --> |
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
|
1 2 3 |
<!-- tombol yang menampilkan modal dialog jika di klik --> <button id="tombol">KLIK SAYA !!</button> <!-- akhir tombol --> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script type="text/javascript"> $(document).ready(function(){ $( "#kotak-dialog" ).dialog({ autoOpen: false, show: { effect: "blind", duration: 1000 }, hide: { effect: "explode", duration: 1000 } }); $( "#tombol" ).click(function() { $( "#kotak-dialog" ).dialog( "open" ); }); }); </script> |
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
|
1 2 3 4 5 6 7 8 9 10 11 |
$( "#kotak-dialog" ).dialog({ autoOpen: false, show: { effect: "blind", duration: 1000 }, hide: { effect: "explode", duration: 1000 } }); |
jalankan dan klik pada tombol.
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.
Tutorial Menarik Lainnya
JQuery UI Part 15 : Interaksi Selectable dan Sortable di JQuery UI
JQuery UI Part 14 : Membuat Resizable Dengan JQuery UI
JQuery Part 13 : Membuat Interaksi Droppable Dengan JQuery UI
JQuery UI Part 12 : Membuat Interaksi Draggable Dengan JQuery UI
