Membuat Dialog Box Dengan Fungsi jQuery

Unknown

jQuery

25 Des 2013

4 Komentar

Membuat Dialog Box Dengan Fungsi jQuery - Tentu Anda pernah membuat sebuah dialog box dengan menggunakan popup, tapi pada artikel ini saya akan memodifikasi dialog box tersebut dengan fungsi jQuery agar lebih simpel dan mudah dipahami.

MEMBUAT KOTAK DIALOGNYA

Langkah 1 : Langkah yang pertama 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;
}

Langkah 2 : 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
}

Langkah 3 : 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 Hilbram Kurnia Blog's Tutorial. Ini hanya contoh dialog box sederhana dengan jQuery. Untuk membuatnya, silahkan fahami sedikit demi sedikit, jangan terburu-buru.
    <div class='close'>OK</div>
</div>

MENAMBAHKAN 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>

MENAMBAHKAN FUNGSI 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>

Semoga bermanfaat..

Resource :  http://blog.kangismet.net/2013/11/membuat-simple-dialog-box-dengan-jquery.html