Membuat Dua Buah Dialog Box Dengan Toggle Jquery

Membuat Dua Buah Dialog Box Dengan Toggle Jquery

Bola Hero Gawai

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...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

60 Comments Add Comment

Patromax teu nya? :)
jago yeung si akang jQueryna ayeuna :-bd

Balas

Keduaxxx.....wah kalah sama Kang Ismet nih...padahal udah saya nongol dari tadi....KAng Adhy..tipsnya bermamfaat sekali. Saya bookmark dulu :) soalnya lagi sibuk..hehe...salam.

Anaktimor17.blogspot.com

Balas

Wah masih jauh tina jago kang hehehe :)
Dibandingkan dengan css dan html, javascript lebih sulit untuk yang belajar otodidak seperti saya karena memakai bahasa logika ya kang. :)

Balas

Kang Ismet...enggal kalintang...kawon deh...

Balas

ari kang markus teh linggih dimana? kaleresan nuju BW we kang :)

Balas

Ditambah variasi jadi nambah mantap wae :D

Balas

Silahkan mas Markus :D

Balas

Iya kang tinggal kreatifitas kita aja ;)

Balas

wihhh
tak ijin untuk mengaplikasikan ms broo

Balas

kang kompi emang jago toggle yaa ;)

Balas

Silahkan bang Ronny ;)

Balas

Belum jago sis :) hanya kebetulan mengerti apa yang ditanyakan mas Anto Suderajad. Sama saya juga masih dalam tahap belajar :D

Balas

hehee. oh iya kang kompi, klo boleh jawab pertanyaan aku di oot yaa ;)

Balas

Oh iya hehehehe... :p nanti saya jawab ya ;)

Balas

Dialog box yang sangat keren, nanti saya coba terapkan diblog saya juga.

Balas

kayaknya mas adhy sekrg main Toggle2an lho kang ismet :-bd

Balas

Duh kang naha nya sok kapanerian wae ... punten ah !!
ngemeng-ngemeng hebat pisan euy eta jqueryna .. bisa kah saya menyicipinya hehe

Balas

Siapa dulu dong mas adhy gitu lho hehe ...
saya raosan kang ah

Balas

lumayan mengerikan juga kodenya, nepi ka leber ka handap heheeh :D

Balas

kalo dialog box ada banyak mungkin kode css nya jd tambah banyak jg ya :D
keren tutornya :-bd

Balas

klo lht demonya, bgs jg utk t4 emot...
cocok g cocok cb dl...
simpan dl mas adhy...

Balas

klo lht demonya, bgs jg utk t4 emot...
cocok g cocok cb dl...
simpan dl mas adhy...

Balas

hehe saya masih kurang paham soal jquery kang, dari sekian banyak bahasa pemograman bagi saya javascript yang paing susah :D

Balas

Dua jempol Mas :-bd :D

Balas
This comment has been removed by the author.

Ga bisa saya mas.. gagal terus, jadi bingung nih.. :(

Balas

Silahkan mas Felix :D

Balas

Silahkan mas Felix :D

Balas

Ah kang Ruly mah sok kitu hehhehe ^_^

Balas

Hehhehe itu karena dijejerin ke bawah kang, kalau kodenya dijejerin ke samping mah jadi sedikit kodenya heheheh :D

Balas

Nah biar ga banyak, tombol dan dialog boxnya disamain :D

Balas

Silahkan sista ;)

Balas

Betul mas heri, javascript menggunakan bahasa logika jadi kita harus lebih paham dulu peraturan bahasa untuk kode-kodenya @@,

Balas

wah lumayan banyak script nya mas... tapi hasilnya keren ya mas.. bisa di pake buat pengumuman juga nih mas... ijin simpan kodenya dulu mas, nanti kalau saya mau memberi pesan atau pengumuman untuk sahabat blogger, bisa saya gunakan ini.. terimakasih mas adhy....

Balas

Makasih mas Nazar :)

Balas

Nyobanya di Jsfiddle mas setelah ok baru aplikasikan ke blog :D

Balas

Silahkan mas Nady :)

Balas

memang jos mas Adhy kreatif bgt..he he he

Balas

kreatif banget kang, tapi ini valid HTML5 nga yah?

Balas

oh , saya kirain , satu tombol saat di klik muncul 2 dialog box :D heheheh

Balas

kalau mau belajar javascript ,, belajar saja edit-edit script.nya dulu , yah semacam eksperimen ,, lalu kenali bagian-bagian.nya :)

Balas

Menarik juga Kang Membuat dua buah dialog box saya ijin ]
Coba dulu yah Kang terima kasih sudah berbagi :)

Balas

wah lagi2 main jquery,, salut dah buat kang Adhy.. :-bd

Balas

wah, mantap banget nih,..
main-main dengna jquery :D
mantap infonya

Balas

Lapor kang!
ane nemu nih blog yang ngeclone template Kompi Ajaib
dan orangnya adalah orang yang kemarin nge-clone Template Blog KI!
nih liat link nya -> http://fasteerwuss.blogspot.com/
blog dia -> http://ahmadsuyadi.blogspot.com

Balas

Iya template ane hasil modifikasi di cloning :(
Sedih banget ya cape'' modifikasi kalau di cloning'' apalagi kalau di share

Balas

kita hancurkan clonner

Balas

iya gan, Ahmad Suyadi emang tukang clone template!

Balas

Nyobanya jangan di jsfiddle terlalu ribet... :D Langsung ajah ke sini:
htmledi.squarefree.com

Balas

Langsung tes ajah di validator w3... :)

Balas

itu blog clonenya di private

Balas

Hadir Bang..
salam kenal dari blog baru :)
ijin ikuti ya =D

Balas

cara naruh ini dimana kang ?
$(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();
});
});

Balas

Di atas kode </body> dan jangan lupa pakai ini
<script type='text/javascript'>
//<![CDATA[
KODE JAVASCRIPT DI SINI
//]]>
</script>

Balas

Mantap infonya kang

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×