Membuat Simple Dialog Box Dengan JQuery

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 :

Demo - Try it
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'

Demo - Try it

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

Demo - Try it
Selamat mencoba, semoga bermanfaat...