Membuat Dua Buah Obrolan Box Dengan Toggle Jquery

Postingan menciptakan dua buah obrolan box dengan toggle jquery ini gotong royong untuk menjawab pertanyaan mas Anto Suderajad pada postingan sebelumnya. Beliau menanyakan bagaimana caranya untuk menciptakan dua buah obrolan box atau menambahkan obrolan box lain pada obrolan box yang telah ada. Nah dengan mengikuti postingan ini gotong royong kita dapat menciptakan atau menambahkan lebih dari satu buah obrolan box.

Agar lebih paham silahkan buka dulu postingan wacana menciptakan obrolan box dengan penambahan fungsi toggle pada link di bawah ini.

• Baca dulu: Membuat Dialog Box Dengan Penambahan Fungsi Toggle

Nah untuk menambahkan atau menciptakan obrolan box gres harus menciptakan ID Dialog box berbeda dari obrolan box sebelumnya, begitu juga untuk tombol close dan tombol untuk memunculkan obrolan box-nya harus menciptakan class yang berbeda, contohnya #dialog-box2 dan .close2 serta .muncul2

Jika kita menciptakan tombol dan obrolan box-nya sama persis dengan yang telah ada, kita tinggal menambahkan kode-kode tadi pada kode-kode yang telah ada dengan penambahan tanda koma ( , ) diantaranya menjadi ibarat di bawah ini. Silahkan perhatikan dengan seksama perbedaannya dengan instruksi pada postingan sebelumnya.

 #dialog-box,#dialog-box2 {
     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,.close2 {
     background:#bbb;
     color:#fff;
     border-radius:3px;
     padding:4px;
     text-align:center;
     margin:25px auto 2px;
     cursor:pointer;
     width:30px;
 }
 .close:hover,.close2: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,.muncul2 {
  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,.muncul2:hover {
  background-color:#dfdfdf;
 }

Jika ingin menciptakan tombol dan obrolan box-nya berbeda dengan tombol dan obrolan box yang telah ada maka silahkan buat instruksi CSS yang berbeda untuk elemen-elemen gres tersebut ibarat di bawah ini.

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

Jika Anda ingin menambahkan obrolan box lainnya ibarat obrolan box ke-3 dan seterusnya, silahkan lakukan hal yang sama untuk CSS-nya ibarat di atas. 

Nah untuk instruksi HTML-nya silahkan perhatikan instruksi di bawah ini, silahkan bandingkan dengan instruksi pada postingan sebelumnya.

 <div class="muncul">Dialog</div>
 <div class="muncul2">Dialog 2</div>
 <div class='dialog-overlay'></div>
 <div id='dialog-box'>
     Selamat tiba di Blog Kompi Ajaib.<br/>
     Ini hanya teladan obrolan box sederhana dengan jQuery dari Kang Ismet dengan penambahan fungsi toggle.
     <div class='close'>OK</div>
 </div>
     <div id='dialog-box2'>
     Selamat tiba di Blog Kompi Ajaib.<br/>
     Ini hanya teladan obrolan box yang kedua dengan isi yang berbeda dan fungsi toggle yang berbeda pula.
     <div class='close2'>OK</div>
 </div>

Dan untuk javascriptnya ibarat pada instruksi di bawah ini, silahkan bandingkan juga dengan instruksi javascript pada postingan sebelumnya semoga lebih paham perbedaannya.

 $(function() {
      //Tampilkan kotak obrolan ketika .muncul diklik
      $('.muncul').click(function() {
           $('#dialog-box').toggle("clip");
           $('.dialog-overlay').fadeTo("normal", 0.4);
      });
      //Tutup kotak obrolan ketika .close diklik
      $('.close').click(function() {
           $('#dialog-box').toggle("bounce");
           $('.dialog-overlay').hide();
      });
     //Tampilkan kotak obrolan ke-2 ketika .muncul2 diklik
      $('.muncul2').click(function() {
           $('#dialog-box2').toggle("slide");
           $('.dialog-overlay').fadeTo("normal", 0.4);
      });
      //Tutup kotak obrolan ke-2 ketika .close2 diklik
      $('.close2').click(function() {
           $('#dialog-box2').toggle("fold");
           $('.dialog-overlay').hide();
      });
 });

Lakukan hal yang sama dengan penambahan kode-kodenya untuk box ketiga dan seterusnya jikalau Anda ingin menciptakan lebih dari dua buah obrolan box baik pada instruksi HTML ataupun pada javascript-nya.

DEMO DENGAN 1 WARNA | DEMO DENGAN WARNA BERBEDA

Jangan lupa untuk menambahkan instruksi jquery dan jquery-ui semoga imbas toggle-nya dapat berjalan. Untuk efek-efek toggle lainnya silahkan baca lagi pada link di bawah ini.

• Baca juga : Beberapa Jenis Efek Toggle Dengan Jquery

Semoga postingan ini dapat dipahami...

Sumber https://www.kompiajaib.com/

Share this post