Membuat Dialog Box Dengan Penambahan Fungsi Toggle

Dialog Box Dengan Penambahan Fungsi Toggle
Postingan ini saya buat untuk melanjutkan postingan kemarin tentang fungsi Toggle Jquery. Kali ini saya share contoh penerapan fungsi toggle ini pada elemen blog. Salah satunya pada dialog box yang saya ambil dari postingan Kang Ismet.

Namun pada dialog box ini saya rubah sedikit tampilannya agar tidak sama persis dengan buatan kang Ismet, biar lebih kreatif dikit hehehehe...

Kali ini tentunya saya tidak akan menjelaskan bagaimana cara membuat dialog box ini karena sudah di bahas tuntas oleh Kang Ismet. Untuk link postingannya ada di bagian bawah postingan ini.

Untuk yang belum membaca postingan tentang fungsi dan efek toggle ini silahkan baca dulu postingannya pada link di bawah ini.


Bagi yang sudah baca silahkan ikuti kelanjutannya di bawah ini yaitu cara menggunakan toggle ini. Pada dasarnya dalam pembelajaran membuat blog dan elemen-elemennya ini diperlukan kreatifitas kita karena sebenarnya bahan-bahannya sudah banyak disediakan di internet, tinggal kita memilih mana yang benar-benar diperlukan untuk blog kita.

Salah satunya dialog box yang kita bahas kali ini. Pada postingannya, Kang Ismet sudah menjelaskan secara rinci cara membuatnya, tingga kreatifitas kita untuk mengubah tampilannya agar sesuai dengan tema blog kita. Dan kini kita akan menambahkan efek toggle pada dialog box ini dan akan terlihat efeknya ketika memunculkan dan menghilangkan dialog box-nya.

Kode CSS

#dialog-box {
    position:fixed;
    top:50px;
    left:50%;
    width:320px;
    margin-left:-160px; /*setengah dari lebar kotak dialog*/
    color:#555;
    background-color:#ddd;
    border:2px solid #ccc;
    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;
    display:none;
    text-align:center;
}
.close {
    background:#bbb;
    color:#fff;
    border-radius:3px;
    padding:4px;
    text-align:center;
    margin:25px auto 2px;
    cursor:pointer;
    width:30px;
}
.close:hover {
    background-color:#aaa
}
#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;
}
.muncul {
font-size:14px;
font-family:Arial;
font-weight:normal;
border-radius:5px;
border:1px solid #dcdcdc;
padding:5px 10px;
text-decoration:none;
background-color:#ededed;
color:#777777;
display:inline-block;
text-shadow:1px 1px 0px #ffffff;
  box-shadow:inset 1px 1px 0px 0px #ffffff;
    cursor:pointer;
}
.muncul:hover {
background-color:#dfdfdf;
}

Kode HTML

<div class="muncul">Munculkan Dialog</div>
<div id='dialog-overlay'></div>
<div id='dialog-box'>
    Selamat datang di Blog Kompi Ajaib.<br/>
    Ini hanya contoh dialog box sederhana dengan jQuery dari Kang Ismet dengan penambahan fungsi toggle.
    <div class='close'>OK</div>
<div>

Nah penambahan efek toggle ini akan dilakukan pada kode javascript dialog box ini.

Kode javascript aslinya seperti di bawah ini

$(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();
     });
});

Silahkan ganti kode .fadeIn() pada tampilan kotak dialog muncul saat diklik dan kode .fadeOut() pada tutup kotak dialog saat di-close dengan kode toggle yang saya sharing kemarin. Anda bisa memberikan dua efek berbeda ketika memunculkan dan menutup kotak dialognya. Sehingga perubahannya seperti pada kode di bawah ini.

$(function() {
     //Tampilkan kotak dialog saat .muncul diklik
     $('.muncul').click(function() {
          $('#dialog-box').toggle("explode");
          $('#dialog-overlay').fadeTo("normal", 0.4);
     });
     //Tutup kotak dialog saat .close diklik
     $('.close').click(function() {
          $('#dialog-box').toggle("bounce");
          $('#dialog-overlay').hide();
     });
});

Pada tampilan kotak dialog muncul saya menggunakan efek toggle "explode" dan pada saat kotak dialog ditutup saya mengunakan efek "bounce". 


Cukup bagus bukan? Silahkan Anda coba sendiri... selamat berkreasi....

Postingan Dialog Box Kang Ismet: http://blog.kangismet.net/2013/11/membuat-simple-dialog-box-dengan-jquery.html

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments