Membuat Kotak Dialog Sederhana dengan jQuery
- Ada request tutoial dari sahabat, yaitu bagaimana cara membuat tombol
ketika di klik memunculkan kotak dialog. Sebetulnya sudah banyak
tutorial tentang ini, baik di blog lokal atau di luaran sana.
Disini saya akan menjelaskan step by step pembuatannya. Untuk membuat
kotak dialog yang berbeda dengan tutorial ini, setidaknya harus memahami
tentang CSS, HTML dan jQuery. Oke inilah langkah-langkahnya nya
Membuat Kotak Dialog
Langkah pertama yang dilakukan adalah membuat kotak dialog, silahkan
sesuaikan ukuran dan warna sesuai keinginan sobat, penempatannya seperti
biasa sebelum
]]></b:skin> atau
</style>. Contoh CSS :
#dialog-box {
position:fixed;
top:50px;
left:50%;
width:320px;
margin-left:-160px; /*setengah dari lebar kotak dialog*/
color:white;
background-color:#174a87;
border:8px solid #0a2e58;
box-shadow: 0 0 2px 1px black,0 0 10px black;
font:normal 12px Arial;
line-height:1.6em;
padding:15px;
text-align:left;
border-radius:5px;
z-index:1000;
}
Buat juga CSS untuk menutup kotak dialog yang nantinya berupa tanda silang (X) atau tombol OK
.close {
background:#0a2e58;
color:#d9e0e9;
border-radius:3px;
padding:4px;
text-align:center;
margin:25px auto 2px;
cursor:pointer;
width:30px;
}
.close:hover {
background-color:#041f3e
}
Setelah itu buat kode HTMLnya, tambahkan juga html untuk tombol yang nantinya dipakai untuk membuka kotak dialog, simpan diatas
</body>:
<button class='muncul'>Munculkan Dialog</button>
<div id='dialog-box'>
Selamat datang di Blog Kang Ismet. Ini hanya contoh dialog box sederhana dengan jQuery. Untuk membuatnya, silahkan fahami sedikit demi sedikit, jangan terburu-buru.
<div class='close'>OK</div>
</div>
hasilnya seperti ini :
Dialog diatas belum bisa di apa-apain karena kita belum menambahkan bumbu
jQuery untuk menampilkan dan menyembunyikannya.
Penambahan Fungsi jQuery
Sebelum membuat fungsi jquery, tentunya sembunyikan dulu kotak dialog dengan
display:none atau
visibility:hidden
#dialog-box {
....
....
....
display:none;
}
Supaya jQuery berfungsi, pastinya template sobat harus terpasang
jQuery library.
Selanjutnya hal yang wajib difahami adalah kode HTML yang dibuat
(kembali ke atas untuk melihat kode HTML). Tombol untuk membuka dialog
kita buat dengan
class='muncul' sedangkan untuk menutup kotak dialog mempunyai
class='close'. Harap di ingat,
id ditandai dengan
# sedangkan
class dengan
. (titik).
Inilah perintah jQuery untuk menutup dan membuka kotak dialog, simpan diatas
</body>
<script type="text/javascript">
//<![CDATA[
$(function() {
//Tampilkan kotak dialog saat .muncul diklik
$('.muncul').click(function() {
$('#dialog-box').fadeIn();
});
//Tutup kotak dialog saat .close diklik
$('.close').click(function() {
$('#dialog-box').fadeOut();
});
});
//]]>
</script>
Sekarang coba klik tombol 'Munculkan Dialog' setelah muncul klik 'OK'
Menambahkan Overlay
Overlay mempunya arti menyimpan sesuatu di atas sesuatu. Dalam istilah
website, overlay merupakan tabir transparan untuk menutupi keseluruhan
web sehingga fokus pada elemen tertentu. Kebanyakan tabir yang digunakan
berwarna hitam transparan.
Kode CSS untuk overlay kurang lebih seperti ini :
#dialog-overlay {
position:fixed !important;
position:absolute; /*tambahkan posisi ini supaya fix di IE*/
z-index:999; /*nilai ini harus dibawah nila z-index pada kotak dialog*/
top:0px;
right:0px;
bottom:0px;
left:0px;
background-color:#000;
display:none;
}
Setelah selesai dengan CSS, kita tambahkan HTMLnya pada HTML yang telah kita buat di atas
<button class='muncul'>Munculkan Dialog</button>
<div id='dialog-overlay'></div>
<div id='dialog-box'>
Selamat datang di Blog Kang Ismet. Ini hanya contoh dialog box sederhana dengan jQuery. Untuk membuatnya, silahkan fahami sedikit demi sedikit, jangan terburu-buru.
<div class='close'>OK</div>
<div>
Tambahkan juga pada fungsi jQuery, supaya terbuka dan tertutup. Pada saat terbuka, saya menggunakan
.fadeTo("normal", 0.4) supaya tabir menjadi transparan.
<script type="text/javascript">
//<![CDATA[
$(function() {
//Tampilkan kotak dialog saat .muncul diklik
$('.muncul').click(function() {
$('#dialog-box').fadeIn();
$('#dialog-overlay').fadeTo("normal", 0.4);
});
//Tutup kotak dialog saat .close diklik
$('.close').click(function() {
$('#dialog-box').fadeOut();
$('#dialog-overlay').hide();
});
});
//]]>
</script>
Maka setelah penambahan overlay hasilnya seperti ini
Selamat mencoba, semoga bermanfaat..
