Membuat Obrolan Box Dengan Penambahan Fungsi Toggle

Postingan ini saya buat untuk melanjutkan postingan kemarin perihal fungsi Toggle Jquery. Kali ini saya share pola penerapan fungsi toggle ini pada elemen blog. Salah satunya pada obrolan box yang saya ambil dari postingan Kang Ismet.

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

Kali ini tentunya saya tidak akan menjelaskan bagaimana cara menciptakan obrolan box ini alasannya sudah di bahas tuntas oleh Kang Ismet. Untuk link postingannya ada di bab bawah postingan ini.

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

Baca juga: Beberapa Jenis Efek Toggel Dengan Jquery

Bagi yang sudah baca silahkan ikuti kelanjutannya di bawah ini adalah cara memakai toggle ini. Pada dasarnya dalam pembelajaran menciptakan blog dan elemen-elemennya ini dibutuhkan kreatifitas kita alasannya bergotong-royong bahan-bahannya sudah banyak disediakan di internet, tinggal kita menentukan mana yang benar-benar dibutuhkan untuk blog kita.

Salah satunya obrolan box yang kita bahas kali ini. Pada postingannya, Kang Ismet sudah menjelaskan secara rinci cara membuatnya, tingga kreatifitas kita untuk mengubah tampilannya biar sesuai dengan tema blog kita. Dan sekarang kita akan menambahkan imbas toggle pada obrolan box ini dan akan terlihat efeknya ketika memunculkan dan menghilangkan obrolan 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 tiba di Blog Kompi Ajaib.<br/>
     Ini hanya pola obrolan box sederhana dengan jQuery dari Kang Ismet dengan penambahan fungsi toggle.
     <div class='close'>OK</div>
 <div>
 

Nah penambahan imbas toggle ini akan dilakukan pada aba-aba javascript obrolan box ini.

Kode javascript aslinya menyerupai di bawah ini

 $(function() {
      //Tampilkan kotak obrolan ketika .muncul diklik
      $('.muncul').click(function() {
           $('#dialog-box').fadeIn();
           $('#dialog-overlay').fadeTo("normal", 0.4);
      });
      //Tutup kotak obrolan ketika .close diklik
      $('.close').click(function() {
           $('#dialog-box').fadeOut();
           $('#dialog-overlay').hide();
      });
 });
 

Silahkan ganti aba-aba .fadeIn() pada tampilan kotak obrolan muncul ketika diklik dan aba-aba .fadeOut() pada tutup kotak obrolan ketika di-close dengan aba-aba toggle yang saya sharing kemarin. Anda dapat memperlihatkan dua imbas berbeda ketika memunculkan dan menutup kotak dialognya. Sehingga perubahannya menyerupai pada aba-aba di bawah ini.

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

Pada tampilan kotak obrolan muncul saya memakai imbas toggle "explode" dan pada ketika kotak obrolan ditutup saya mengunakan imbas "bounce". 

DEMO

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

Postingan Dialog Box Kang Ismet: https://komporajaibku.blogspot.com//search?q=beberapa-jenis-efek-toggle-dengan-jquery

Sumber https://www.kompiajaib.com/

Share this post