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.