Membuat Dialog Box Dengan Penambahan Fungsi Toggle

Membuat Dialog Box Dengan Penambahan Fungsi Toggle

Bola Hero Gawai

Membuat Dialog Box Dengan Penambahan Fungsi Toggle

Dialog Box Dengan Penambahan Fungsi Toggle
Postingan ini saya buat untuk melanjutkan postingan kemarin tentang fungsi Toggle Jquery. Kali ini saya share contoh penerapan fungsi toggle ini pada elemen blog. Salah satunya pada dialog box yang saya ambil dari postingan Kang Ismet.

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

Kali ini tentunya saya tidak akan menjelaskan bagaimana cara membuat dialog box ini karena sudah di bahas tuntas oleh Kang Ismet. Untuk link postingannya ada di bagian bawah postingan ini.

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


Bagi yang sudah baca silahkan ikuti kelanjutannya di bawah ini yaitu cara menggunakan toggle ini. Pada dasarnya dalam pembelajaran membuat blog dan elemen-elemennya ini diperlukan kreatifitas kita karena sebenarnya bahan-bahannya sudah banyak disediakan di internet, tinggal kita memilih mana yang benar-benar diperlukan untuk blog kita.

Salah satunya dialog box yang kita bahas kali ini. Pada postingannya, Kang Ismet sudah menjelaskan secara rinci cara membuatnya, tingga kreatifitas kita untuk mengubah tampilannya agar sesuai dengan tema blog kita. Dan kini kita akan menambahkan efek toggle pada dialog box ini dan akan terlihat efeknya ketika memunculkan dan menghilangkan dialog 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 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>

Nah penambahan efek toggle ini akan dilakukan pada kode javascript dialog box ini.

Kode javascript aslinya seperti di bawah ini

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

Silahkan ganti kode .fadeIn() pada tampilan kotak dialog muncul saat diklik dan kode .fadeOut() pada tutup kotak dialog saat di-close dengan kode toggle yang saya sharing kemarin. Anda bisa memberikan dua efek berbeda ketika memunculkan dan menutup kotak dialognya. Sehingga perubahannya seperti pada kode di bawah ini.

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

Pada tampilan kotak dialog muncul saya menggunakan efek toggle "explode" dan pada saat kotak dialog ditutup saya mengunakan efek "bounce". 


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

Postingan Dialog Box Kang Ismet: http://blog.kangismet.net/2013/11/membuat-simple-dialog-box-dengan-jquery.html

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

61 Comments Add Comment

Amankn hla pertamax na kang!

Balas

Bade di praktek hla kang..ke pami aya nu te ngartos nembe di tarosken :)

Balas

Okelah modifikasinya.. ada 'gigibrig' nya :D

Balas

keren mas, penuh dengan kreaksi nih. :)

Balas

Mangga kang Heri :D

Balas

Masih tunduh keneh Kang, smalm habis utak atik kode buntut :D

Balas

Heheheehe kasetrum ku kang Ismet =D

Balas

Hebat nya Kang Ismet, tiasa ngabirigidig kitu ku Kang Adhy mah...

Balas

Mencoba dan belajar sis mumpung masih diberi waktu hehehehe :D

Balas

Makasih gan infonya!

Balas

Mas Master, eh..Mas ADHY, kalo width #box-nya di buat 700px kok efeknya kurang maksimal ya mas.....
Mohon arahan, Satu Lagi apakah kecepatan efeknya bis a di atur?
Saya tunggu responya,
Trimakasih

Balas

Kalau ingin efeknya pelan coba pakai animasi, sudah dibahas sama mas Mahfid di sini http://www.fullblogdesign.com/2013/11/alert-box-dengan-fungsi-animasi.html

Balas

bantu jawab kang... saya coba ukuran 700px normal aja, efek 'explode' bisa dipecah menjadi beberapa bagian :

$('#dialog-box').toggle("explode", {
pieces: 36
}, 1000);


Untuk efek 'bounce' arah dan jumlah bouncenya bisa di atur, juga kecepatannya

$('#dialog-box').toggle("bounce", {
direction: "up",
times: 3
}, 2000);


demo : http://jsfiddle.net/SRQs4/1/show/

Balas

ini habis ngepos toggle.. dapat pelajaran dari situ langsung bisa dikembangkan lagi.. mantap.

Balas

Nice mas adi, kombinasi antara dialog box dengan efek toggle-nya. Asal jangan dikombinasikan dengan maen toggle aja :D

Balas

Tuh kang Ismet memang kasep dan baik hati hehhehehe... :D

Balas

Itu yang saya khawatirkan kang =D bikin dialog box sambil maen togel wkwkwkw =D

Balas

Iya mas silahkan kembangkan lagi :D

Balas

Mantap kang, Kang, Masa ada orang yang modif template valid html5 gratis terus dijadiin premium ama dia, terus dijual ama dia,,, mendingan gak usah beli ya =D , Nungguin template gratis aja dari kang Adhy ^_^ hehe

Balas

Nya da kabulusan kang hahaha

Balas

Wehehe keren bin mantap kang seeppp meni ngageter kitu hehe

Balas

Waow....Sungguh suatu kebanggaan tersendiri, para Sesepuh pada turun tangan, Trimakasih buat Mas ADHY,...Trimakasih buat Kang Ismet...
Langsung saya coba...

Balas

master, saya bingung untuk penempatannya :( maklumlah saya hanya butiran debu di blog :(

Balas

ilmu baru lagi,, keren bang

Balas

Simpen kode HTML nya di mana sista ingin tampilkan...

Balas

owhh gitu kang, makasih master

Balas

Selamat malam Kang Adhy duh ckckc saya ketinggalan
Berita nyusul Kang belajar membuat dialog box terima kasih

maaf oot : chat hangout saya siap mohon bantuan Kang :)

Balas

Saya nyimak dulu mas sebab kurang memahami sebab masih newbi pake banget
saya pelajari pelan2

Balas

saya kok tidak bisa menemukan kolom komentar di blognya kang ismet versi web nya pun tidak ada

Balas

Anfai aku bisa membuat dialog with toggle..
Pasti blogku jadi keren

Balas

kalo misalkan mau meletakkan widget didalam nya gimana mas ??

Balas

Heheheh nanti kalau ada waktu

Balas

Ngageter ningali manehna calik sisi cai hehehehe

Balas

Terima kasih =D

Balas

Iya mbak Indah alon-alon asal kelakon =D

Balas

Belajar pasti bisa sis =D

Balas

Letakkan di dalam id dialog-box (menggantikan kalimat di dalamnya).

Balas

Ini contohnya http://jsfiddle.net/kompiajaib/Vr4U7/show/

Balas

berhasil , horeee :D terima kasih banyak master :D

Balas

Tips yang bagus mas. Lama tak berkunjung ke sini mas, jadi makin kangen sama blog Kompi Ajaib sama mas Adhy nya juga, hehehe... :D

Ngomong-ngomong, tutorialnya tambah lengkap dan blognya makin bagus aja, hehehe... :) Saya acungkan jempol deh buat mas Adhy... :D

Balas

gan mau nanya,,kok itu kalo dibuat 2,,,pas kita klik,,isi dialog box dua2nya sama,,padahal isinya masing2 beda,,,mohon bantuannya

Balas

Makasih Kang Hilman atas apresiasinya ;)

Balas

Harus dibuat dengan ID yang berbeda :)

Balas

class ny harus beda juga gak???

Balas

Iya agar tombolnya juga muncul 2

Balas

gan sudah saya coba tapi masih gagal,,masi muncul isi dialog box nya yang sama,,, kalo bersedia tolong kirim ke email saya gan,, email : allpehid@gmail.com ,,,,, mohon bantuannya gan

Balas

Maaf kang aku masih bingung, cara masukin kode javascriptnya gimana yah ? hehe

Balas

<script type='text/javascript'>
//<![CDATA[
JAVASCRIPT DI SINI
//]]>
</script>

Balas

makasih akang :-) maaf yah, saya awam. Hehe

Balas

kok enggak bekerja yah kang ? ' bingung '

Balas

kok tampilan kotaknya enggak ada yah kang ? pasang kode cssnya diatas ]]> kn ?

Balas

Iya css-nya dipasang di atas kode ]]></b:skin>, namun jangan lupa pasang jquery-ui agar togglenya bekerja, coba baca postingan ini
http://www.kompiajaib.com/2013/12/beberapa-jenis-efek-toggle-dengan-jquery.html

Balas

Untuk Mengubah Tampilan Button Nya Bagaimana Gan ?

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!

×
×
×