#JQuery

Membuat modal dialog dengan JQuery (Tanpa Plugin)

By Diki Alfarabi Hadi
7 February 2016
JQuery

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

<!DOCTYPE html>

<html>

<head>

<title>Membuat modal dialog dengan JQuery | MalasNgoding.com</title>

</head>

<body>

<center><h1>Membuat modal dialog dengan JQuery | MalasNgoding.com</h1></center>

KLIK TOMBOL UNTUK MENAMPILKAN MODAL DIALOG

Halo . ini adalah modal dialog | MalasNgoding.com

</div>

<button id="tombol-tutup">CLOSE</button>

</div>

$(document).ready(function(){

$('#tombol').click(function(){

$('#modal-kotak , #bg').fadeIn("slow");

});

$('#tombol-tutup').click(function(){

$('#modal-kotak , #bg').fadeOut("slow");

});

</script>

</body>

</html>

style.css

body{

background: #ecf0f1;

font-family: sans-serif;

font-size: 11pt;

}

#modal-kotak{

margin:5% 30% 30% 30%;

width: 500px;

height: 200px;

position: absolute;

position:fixed;

z-index:1002;

display: none;

background: white;

}

#atas{

font-size: 15pt;

padding: 20px;

height: 80%;

}

#bawah{

background: #fff;

}

#tombol-tutup{

background: #e74c3c;

}

#tombol-tutup,#tombol{

height: 30px;

width: 100px;

color: #fff;

border: 0px;

}

#bg{

opacity:.80;

position: absolute;

display: none;

position: fixed;

top: 0%;

left: 0%;

width: 100%;

height: 100%;

background-color: #000;

z-index:1001;

opacity: 0.8;

}

#tombol{

background: #e74c3c;

}

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.

$(document).ready(function(){

$('#tombol').click(function(){

$('#modal-kotak , #bg').fadeIn("slow");

});

$('#tombol-tutup').click(function(){

$('#modal-kotak , #bg').fadeOut("slow");

});

</script>

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

lalu klik pada tombol

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.

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.