Selamat datang kembali di website tips dan trik Dumet School, kembali lagi dengan saya tentunya dengan tips – tips seputar dunia website. Pada kesempatan kali ini saya akan memberikan tips tentang Membuat Dialog Animation Dengan jQuery UI, seperti yang kita tahu modal dialog bisa kita buat dengan bootstrap ataupun framework css lainnya. Di dalam jQuery UI pun juga kita dapat membuat modal dialog, namun yang berbeda adalah efeknya. Pada jQuery UI ini selain bisa membuat modal juga bisa ditambahkan fungsi lainnya atau bisa dibilang lebih mudah custom nya. Nah pada latihan kali ini modal yang kita buat dengan jQuery UI adalah dapat di drop yang artinya kita bisa pindahkan modal di semua area body.
Baik, langsung saja kita implementasikan Membuat Dialog Animation Dengan jQuery UI teman – teman siapkan text editornya. Kemudian ketikkan script html seperti gambar di bawah ini
Kemudian save dengan nama index.html, berikutnya kita tambahkan library jQuery dan jQuery UI nya
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Baru kita jalankan modal dialognya dengan menambahkan script jQuery UI nya
<script>
$( function() {
$( "#modal_dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#daftar" ).on( "click", function() {
$( "#modal_dialog" ).dialog( "open" );
});
} );
</script>
Jika sudah save dan jalankan pada browsernya, maka akan menghasilkan output seperti gambar di bawah ini
Jika di klik modal akan tampil
Modal dapat di drop dan di pindahkan posisinya di mana saja, jika ingin clode tinggal klik icon close nya maka modal akan di hidden kembali. Berbeda sekali bukan dengan modal framework yang lainnya, dengan begini ini juga bisa opsi untuk modal yang akan di pakai pada website kalian. Semoga bermanfaat dan bisa menjadi inspirasi untuk teman – teman yang bergelut di dunia website. Sekian pada artikel kali ini tentang Membuat Dialog Animation Dengan jQuery UI pastinya kita akan berjumpa kembali pada tips dan trik yang akan datang. Terimakasih dan sampai jumpa.