Membuat Dua Buah Dialog Box Dengan Toggle Jquery

Dua Buah Dialog Box Dengan Toggle Jquery
Postingan membuat dua buah dialog box dengan toggle jquery ini sebenarnya untuk menjawab pertanyaan mas Anto Suderajad pada postingan sebelumnya. Beliau menanyakan bagaimana caranya untuk membuat dua buah dialog box atau menambahkan dialog box lain pada dialog box yang telah ada. Nah dengan mengikuti postingan ini sebenarnya kita bisa membuat atau menambahkan lebih dari satu buah dialog box.

Agar lebih paham silahkan buka dulu postingan tentang membuat dialog box dengan penambahan fungsi toggle pada link di bawah ini.

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

Jika kita membuat tombol dan dialog 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 seperti di bawah ini. Silahkan perhatikan dengan seksama perbedaannya dengan kode 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 membuat tombol dan dialog box-nya berbeda dengan tombol dan dialog box yang telah ada maka silahkan buat kode CSS yang berbeda untuk elemen-elemen baru tersebut seperti 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 dialog box lainnya seperti dialog box ke-3 dan seterusnya, silahkan lakukan hal yang sama untuk CSS-nya seperti di atas. 

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

<div class="muncul">Dialog</div>
<div class="muncul2">Dialog 2</div>
<div class='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>
    <div id='dialog-box2'>
    Selamat datang di Blog Kompi Ajaib.<br/>
    Ini hanya contoh dialog box yang kedua dengan isi yang berbeda dan fungsi toggle yang berbeda pula.
    <div class='close2'>OK</div>
</div>

Dan untuk javascriptnya seperti pada kode di bawah ini, silahkan bandingkan juga dengan kode javascript pada postingan sebelumnya agar lebih paham perbedaannya.

$(function() {
     //Tampilkan kotak dialog saat .muncul diklik
     $('.muncul').click(function() {
          $('#dialog-box').toggle("clip");
          $('.dialog-overlay').fadeTo("normal", 0.4);
     });
     //Tutup kotak dialog saat .close diklik
     $('.close').click(function() {
          $('#dialog-box').toggle("bounce");
          $('.dialog-overlay').hide();
     });
    //Tampilkan kotak dialog ke-2 saat .muncul2 diklik
     $('.muncul2').click(function() {
          $('#dialog-box2').toggle("slide");
          $('.dialog-overlay').fadeTo("normal", 0.4);
     });
     //Tutup kotak dialog ke-2 saat .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 jika Anda ingin membuat lebih dari dua buah dialog box baik pada kode HTML ataupun pada javascript-nya.


Jangan lupa untuk menambahkan kode jquery dan jquery-ui agar efek toggle-nya bisa berjalan. Untuk efek-efek toggle lainnya silahkan baca lagi pada link di bawah ini.

Semoga postingan ini bisa dipahami...

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