Membuat Kotak Dialog Sederhana dengan jQuery - Ada request tutoial dari sahabat, yaitu bagaimana cara membuat tombol ketika di klik memunculkan kotak dialog. Sebetulnya sudah banyak tutorial tentang ini, baik di blog lokal atau di luaran sana.dialog box

Disini saya akan menjelaskan step by step pembuatannya. Untuk membuat kotak dialog yang berbeda dengan tutorial ini, setidaknya harus memahami tentang CSS, HTML dan jQuery. Oke inilah langkah-langkahnya nya

Membuat Kotak Dialog

Langkah pertama yang dilakukan adalah membuat kotak dialog, silahkan sesuaikan ukuran dan warna sesuai keinginan sobat, penempatannya seperti biasa sebelum ]]></b:skin> atau </style>. Contoh CSS :

#dialog-box {
    position:fixed;
    top:50px;
    left:50%;
    width:320px;
    margin-left:-160px; /*setengah dari lebar kotak dialog*/
    color:white;
    background-color:#174a87;
    border:8px solid #0a2e58;
    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;
}

Buat juga CSS untuk menutup kotak dialog yang nantinya berupa tanda silang (X) atau tombol OK

.close {
    background:#0a2e58;
    color:#d9e0e9;
    border-radius:3px;
    padding:4px;
    text-align:center;
    margin:25px auto 2px;
    cursor:pointer;
    width:30px;
}
.close:hover {
    background-color:#041f3e
}

Setelah itu buat kode HTMLnya, tambahkan juga html untuk tombol yang nantinya dipakai untuk membuka kotak dialog, simpan diatas </body>:

<button class='muncul'>Munculkan Dialog</button>
<div id='dialog-box'>
    Selamat datang di Blog Kang Ismet. Ini hanya contoh dialog box sederhana dengan jQuery. Untuk membuatnya, silahkan fahami sedikit demi sedikit, jangan terburu-buru.
    <div class='close'>OK</div>
</div>

hasilnya seperti ini :


Dialog diatas belum bisa di apa-apain karena kita belum menambahkan bumbu jQuery untuk menampilkan dan menyembunyikannya.

Penambahan Fungsi jQuery

Sebelum membuat fungsi jquery, tentunya sembunyikan dulu kotak dialog dengan display:none atau visibility:hidden

#dialog-box {
    ....
    ....
    ....
    display:none;
}

Supaya jQuery berfungsi, pastinya template sobat harus terpasang jQuery library. Selanjutnya hal yang wajib difahami adalah kode HTML yang dibuat (kembali ke atas untuk melihat kode HTML). Tombol untuk membuka dialog kita buat dengan class='muncul' sedangkan untuk menutup kotak dialog mempunyai class='close'. Harap di ingat, id ditandai dengan # sedangkan class dengan . (titik).

Inilah perintah jQuery untuk menutup dan membuka kotak dialog, simpan diatas </body>

<script type="text/javascript">
//<![CDATA[
$(function() {
     //Tampilkan kotak dialog saat .muncul diklik
     $('.muncul').click(function() {
          $('#dialog-box').fadeIn();
     });
     //Tutup kotak dialog saat .close diklik
     $('.close').click(function() {
          $('#dialog-box').fadeOut();
     });
});
//]]>
</script>

Sekarang coba klik tombol 'Munculkan Dialog' setelah muncul klik 'OK'


Menambahkan Overlay

Overlay mempunya arti menyimpan sesuatu di atas sesuatu. Dalam istilah website, overlay merupakan tabir transparan untuk menutupi keseluruhan web sehingga fokus pada elemen tertentu. Kebanyakan tabir yang digunakan berwarna hitam transparan.

Kode CSS untuk overlay kurang lebih seperti ini :

#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;
}

Setelah selesai dengan CSS, kita tambahkan HTMLnya pada HTML yang telah kita buat di atas

<button class='muncul'>Munculkan Dialog</button>
<div id='dialog-overlay'></div>
<div id='dialog-box'>
    Selamat datang di Blog Kang Ismet. Ini hanya contoh dialog box sederhana dengan jQuery. Untuk membuatnya, silahkan fahami sedikit demi sedikit, jangan terburu-buru.
    <div class='close'>OK</div>
<div>

Tambahkan juga pada fungsi jQuery, supaya terbuka dan tertutup. Pada saat terbuka, saya menggunakan .fadeTo("normal", 0.4) supaya tabir menjadi transparan.

<script type="text/javascript">
//<![CDATA[
$(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();
     });
});
//]]>
</script>

Maka setelah penambahan overlay hasilnya seperti ini


Selamat mencoba, semoga bermanfaat...

141 komentar

Seperti biasa ambil bonus dulu hehhehhe

Balas

ketinggalan lagi , oment dulu ah

Balas

sampe salah ketik " koment" hehe baru baca deh

Balas

Cepet banget mas adi -_-
Saya gak pernah dapet pertamax :D

Balas

enya.. nyamberna pangpayuna :D

Balas

yang jelas ini bermanfaat kang hehhehe :D akhirnya bisa dimodif sesuai keperluan :D

Balas

langsung di samber yeuh :D

Balas

cukup mudah dipahami, tapi saya belum berniat untuk membuat dialog box jadi cuma nyimak+memahami fungsi2nya saja hehehe

Balas

Hehehehe pakai jurus kilat samber gledek heheheh :D

Balas

Tong eleh kunu ngarora kang heheheh :D

Balas

Yang pneting udah baca hehehehe, banyak banget kodenya kang untuk buat kotak dialog yang kecil :(

Balas

jadi ini yang diterapin atau di modif pada tulisan "info" diatas dan tombol konversi dari blog akang ? tapi yang jelas ini sangat bermanfaat kang

Balas

kalau disimak baik2 sebetulnya tidak terlalu banyak.. kebawahnya hanya pengulangan dan penjabaran saja

Balas

iya kang takut keduluan eh malah keduluan kang adhi .. kang adhi cepet banget padahal saya lagi nongkrong juga. hehe

Balas

betul kang.. hanya sedikit perbedaan efek saja

Balas

Menarik artikelnya Kang ijin simak tapi
Mendingan baca dulu agar lebih paham

Balas

Keren banget, kang!
Btw, posisi penampakannya bisa diatur gak kang?
Kalu bisa, cara na kumaha?

Balas

dapat ilmu lagi ini...oh ya kang Ismet kemarin tak coba searching tentang gambar artikel yang tidak muncul di share facebook bahkan gambar widget yang muncul atau foto profil komentator yang muncul dan gunakan cara-cara yang ditulis oleh Kang Ismet belum berhasil juga. Kalau ada waktu luang kang ismet buat turialnya ya...facebook opengraph tidak bisa diterapkan di blog saya, atau ada kode script saya yang salah ya Kang...???

Balas

tinggal atur top, left, right atau bottom
#dialog-box{
....
....
top:50px; /*atur ketinggian disini*/
left:40px; /*atur batas dari kiri atau gunakan right untuk jarak dari kanan*/
}

Balas

Makasih kang....saya simpen dulu, nanti malem cobainnya :D

Balas

kang bisa bantu saya , umh cara mengurangi jarak pada postingan blog saya kang bagaimana ya , soalnya antar postingan yang 1 dan 2 terlalu jauh jaraknya !! bis bantu atasin tdak kang :)

Balas

sip kang sudah saya pasang di blog saya , thanks kang

Balas

ini bisa buat semua yah kang termasuk link download jadi inti nya memunculkannya via dialog box
mantaf kang :d

Balas

Kapan - kapan kalau ada waktu akan saya terapkan mas. Matur nuwun atas tutornya.

Balas

Camkoha...sangat berkualitas artikelnya kang..

Balas

Kang kalo tombol dialog boxnya mau dihilangin secara otomatis setelah dibaca bagaiman kang??
Seperti yang di blognya Kang Ismet :)

Balas

jquery memang mangstab ya kang :D .. apa lagi kalo udah pacaran sama CSS .. dia tuh lengket banget .. haha

jadi makin sayang ke-2-2 nya .. hehe , hatur nuhun kang ..

kalo request tutorial bisa kang? ^_^ ajip nih , rapih beud postingannya .. kata-kata nya juga profesional banget , gak kaya blog ane kang :( #lol

Balas

maaf ya karena saya tolong jawabkan... 
coba tambahkan kode $('.muncul').hide(); ini di bawah kode ini $('#dialog-box').fadeIn();.. maka ia akan menjadi seperti ini... 
$('#dialog-box').fadeIn();
$('.muncul').hide();


maaf sekali lagi ya kang Ismet.. kalau salah bisa dibetulkan :)

Balas

makasih infonya bermanfaat akan dicoba nanti ..

Balas

makasi infonya kang,,, izin sedot

Balas

Top kang....hehehe
Ijin coba dulu, untuk makainya ntar dulu deh...hehe

Balas

wah boleh jg nih, buat ucapan selamat datang :D
trims

Balas

mas Adhy ksh tutornya dong agar bs komen pertamax :D

Balas

mantapp patut dicoba nih...

Balas

keren kang.. disimpan dulu scriptnya kapan-kapan dicoba :D

Balas

silahkan di simpen dulu :D

Balas

kenapa ga bisa diterapkan ya? :D

Balas

satu lagi widget dari kangismet yang saya pasang di blog saya :)
lanjutkan share widget menarik lainnya kang...

Balas

coba simpan .post-share-buttons {display:none} di atas ]]></b:skin>

Balas

terimakasih sudah bantu jawab :-bd

Balas

tos nikah cenah ayeunamah, bieu ka KUA :D request neon ateuh?

Balas

gak kriting ya kang jarinya bisa membuat sedetail gini?? :-bd kalau saya sudah pasti kriting jarinya hehehehe...

Balas

baru pulang rebonding jarinya :D

Balas

hihihi.. pantasan kuat sama angin topan :)

Balas

wah bisa dicoba nih kang, hatur nuhun kang

Balas

mending besok pagi saksikan Komet ISON yang melintasi indonesia, yang jelas harus bangun jam 5. dan sediain kopi. sambil melihat matahari terbit hehehehe...

Balas

Terimakasih Kang, tutornya ... :) Dari kemarin sebetulnya saya penasaran dengan membuat dialog seperti ini .. :)

Balas

kiraim Mike Tyson.. siap laksanakan :-bd

Balas

wah yang bener mba ? mantap deh besok abis subuhan ngeBLOG plus Kopi Item sambil liat komet hehe = perfect relationship :D

Balas

kang kalo dialog-box nya muncul otomatis namun hanya pada pertama kali halaman dibuka dan seterusnya tidak muncul itu gimana caranya? apa pakai cookie?

Balas

pakai cookie sama scriptnya onload

Balas

Tapi ada yang versi Pure CSS-nya juga kan kang? yang pake ::focus atau :checked?

Balas

cara pakai cookie gimana kang.. maaf banyak tanya karena masih belajar html

Balas

bisa sih, tapi panjang CSSnya :)

Balas

Eta PLN pikasebelen pisan 2 x tah kalakuan jiga kamari ...
meni hebring kitu eta si jquery teh nya jiga tukang sulap ... menatap kang eh mantapzzzz

Balas

untung teu jurus monyet kakabuen ge haha

Balas

leres kang sepakat. saurna mah tong waka nikah ayeuna2, ribet syaratna. saurna eta ge. hahah.

Balas

mantep kang.. kantun dikaji tras diterapkeun deui. :)

leres pisan kang ismet mh, cikeneh kamari request, langsung di damelkeun tutorialna. mun restoran tea mh siap saji kang. heheh.
hatur nuhun pisan kang sateuacanna. . :D

Balas

Pokoknya kang Ismet mah Joki kalau buat artikel, pasti pada berebut pertamax.. (frustasi pertamax nih) yg penting mah GURIH-GURIH NYOI.. :)

http://hilbramkurnia3.blogspot.com/

Balas

kudu nyimak bener2 nih agak ribet nih

Balas

hihihi.. benar kang, daripada lihat CSS dan JS tiap hari. kesempatan melihat ISON cuma sekali kang, kalau terlewati besok harus nunggu 30 tahun lagi. :)

Balas

Dapat Ilmu baru lagi yah.. makasih kang ismed =D

mbak@Leony pas jam 5 atau lebih yah =D

Balas

mantaf kang ditampi pisan elmu na :d

Balas

+kang ismet : alah siah, meuni tega .. simkuring teu di ondang! -,- jahat beud eta dua sejoli teh .. awas siah , mun minggu payun saya janten nikah sareng aura kasih moal di ondang -____-

request tutorial eta kang , aduh eta teh naon nyak? kela aduh .. naon nya kang? kedap kang .. aduh naon nya eta teh -,- eta weh kang aduh, ke nyak kang urang inget2 heula .. :D hilap deui .. wkwkw

+ Ridho Muhammad Firdaus : alah etaa , siga nu ngenes kitu kang ridho nyarios teh.. muhun "woles" cenah saur budak ngora ayeuna mah .. "kip kalem en ngantosan acis kangge mas kawin" :D wkwkwkwk

Balas

mantap nihh, tapi belum minat untuk di pasang di blog ane :)

Balas

Yang disitu bukan kode <div> kang, tapi kode </div> kali kang :) :p

Balas

Oh iya kang, aku mau nanya kang.. Coba deh kunjungi Blog aku http://mafiasitez.blogspot.com/ mencoba make trik ini .. tapi kok gagal ya kang? (pas di klik) tulisan di info nya gak ada :(

Balas

kayanya elemen #notifnya ada dua coba yang notif info ganti namananya notif2 atau apa dan di jquerynya juga diganti namanya notif . (maaf kang bantu jawab hehe)

Balas

Maksudnya gimana ya mas? :/

Balas

maksudnya bukan <div> tapi </div> gimana?
itu JSnya salah bukan $('.info-depan').click(function() { harusnya $('#info').click(function() {

Balas

teu nyate atuh nya :) eta meuni lieur kitu request teh ateuh :D

Balas

Coba liat ke atas postingan akang , disitu ada kode <div class='close'>OK</div> pada text menambahkan overlay ..
tapi kode terakhir itu <div> kan seharusnya </div> :)

Balas

Kang kalo yang //Tutup kotak dialog saat .close diklik
$('.close').click(function() {
$('#info-dalam').fadeOut();
$('#info').hide();
$('#info-overlay').hide();


Seharusnya gimana kang, gamau nutup ini :( tombol closenya

Balas
Komentar ini telah dihapus oleh pengarang.

Keren kang...dialog box nya apalagi di beri fungsi animasi tambah mantab ohya kang bikin tutorial tentang cara replace iframe dengan jquery dong agar valid html5 saat kita pasang demo jsfidle di blog

Balas

kalau .animate harus ditambahkan jquery UI, perasaan udah ada yang posting kang kalau demo jsfiddle itu :)

Balas

pelajari lagi class dan id untuk membuka dan menutupnya

Balas

maaf kang ismet , tidak terjadi perubahan dengan saran kang ismet , jadi bagaimana ya :(

Balas

kompi ajaib juga posting kang tapi kalau kita menggunakan embed kadang kalau komputer kita tidak terinstal java/flash kadang gak berfungsi

Balas

coba cari di gugel dengan kata kunci 'membuat demo jsfiddle dengan jquery'

Balas

coba tambahkan !important menjadi .post-share-buttons {display:none !important}

Balas

kang tolong bantu saya komentar hehe
cikan urang cobian kang sugan tiasa ...

Balas

maksad teh bingung bade komentar naon didieu hehe .. makanya saya teh mau nyobian dialog box na hihi

Balas

eta meuni bingung.. urang ngopi we lah

Balas

ah lamun eta teu bingung kang .. sok ah kopi hideung na hehe

Balas
Komentar ini telah dihapus oleh pengarang.

Kang,
gimana sih buat gambar post di homepage seperti di blog kang? (dp-thumbnail img)?
Kayak gini :
[img]http://s27.postimg.org/n4xl72jab/gambar.jpg[/img]

Balas

gimana apanya? buletnya? warna-warni? ada panahnya? atau apanya :)

Balas

untuk kode keseluruhan seperti itu, tidak mungkin dijabarkan dalam komentar

Balas

terima kasih kang Ismet.... sudah dapet

Balas

saya kasih 2 link untuk membuatnya ya:
pertama, buata auto readmore :

http://mastertuts.blogspot.com/2013/10/membuat-auto-readmore-dengan-gambar.html

kedua, tambahkan class baru pada thumbnail :

http://zhinto.blogspot.com/2013/07/menandai-postingan-berdasarkan-kategori.html

Balas

Saya coba berkomentar di postingan terbaru blog ini..... Saya newbie baru pertama kenal dengan blogger yang mencoba untuk mencari ilmu tentang dunia perblogingan
Selanjutnya akan saya "acak2" blog ini hehe.. Maksudnya cari ilmu yang bermanfaat di blog ini :)

Balas

wahhh kalo soal acak acak mah gw nanganin deh KANG....
:D hahaahhahaha
nice tutorial nya kang.

Balas

Ok kang,
saya coba dulu, terima kasih :)

Balas

sae... sae kang (bari teu ngarti???) wkwkwkwkwk

Balas

jiakakakkak... ngacuuung :D

Balas

kang ismet gimana sih cara buat emoticon seperti di blog kang ismet ?

Balas

yang komentar apa postingan?

Balas

komentar gan misalkan ane nulis emoticon ^_^ :D
nah itu gimana cara nya supaya hidden gitu loh ngerti kan ?

Balas

Kang, aku kepengen kaya punya akang jadi muncul pas di klik dari atas atau samping, soalnya kalo fade in kaya munculnya tetap di tempat yang sudah di tentukan :/ pengen nyoba dari atas atau samping munculnya :(

Balas

wess mantap banget kang dialog box nya

Balas

sudah saya buat tutorialnya.. silahkan di cek :)

Balas

Kang saya mau nanya nih, gimana cara membuat tombol info kaya akang ini??..
mohon jawabannya..

http://hilbramkurnia3.blogspot.com/

Balas

kan itu diatas udah tutorialnya....

Balas

hm.. isi artikel blog Achmad Hilbram kok mirip dengan blog Kang Ismet ini...

Balas

ini dia tutor yang ditunggu tunggu *yeay

Balas

tutorial nya menarik sekali kang ismet, saya izin share kembali ya, tp dengan sedikit edit dan peruntukan yg berbeda dari dialog box nya...
btw, untuk kode html nya diatas bukannya <button class='muncul'>Munculkan Dialog</button>
<div id='dialog-overlay'></div>
<div id='dialog-box'>
Selamat datang di Blog Kang Ismet. Ini hanya contoh dialog box sederhana dengan jQuery. Untuk membuatnya, silahkan fahami sedikit demi sedikit, jangan terburu-buru.
<div class='close'>OK</div>
</div>
ya kang? kalo ga tombol "ok" nya ada diluar dialog box nya... :)

Balas

maaf kang , saya mohon maaf sebelumnya , karna komentar saya tak ada hubungannya dgn post ini .
dan mohon maaf saya tambah lg .
soalnya blog kang is saya jadikan salah 1 demo di dalam postingan saya ,
yah moga jalan ini penuh dengan hikmah..
namun kalau kang is tak setuju , saya bisa menggantinya dengan blog bule .
assalamu alaikum.

Balas

mohon di beri pemberitahuan kang is apabila disetujui .
assalamu alaikum .

Balas

kalo bikin dialog box kayak di website lazada yang bagian PENGIRIMAN, apa sama dg ini kang?

Balas

Mantap gan..
lumayan bsa buat d website

Balas

<script type="text/javascript">
//<![CDATA[
$(function() {
//Tampilkan kotak dialog saat .muncul diklik
$('.muncul').click(function() {
$('#konversikode').fadeIn();
$('#dialog-overlay').fadeTo("normal", 0.4);
});
//Tutup kotak dialog saat .close diklik
$('.close').click(function() {
$('#konversikode').fadeOut();
$('#dialog-overlay').hide();
});
});
//]]>
</script>


saya ganti #dialog-box dengan #konversikode yang akan muncul saat diklik, apakah bisa ? sama seperti lightbox bukan ?

Balas

bisa.. tapi konverternya tetep harus iframe

Balas

sumpah keren banget kang saya pakai di menu, hehe

Balas

kang cara ganti background "Munculkan dialog" itu gimana? :o

Balas

Keren lah, visit deh web aku ini http://grandistya.xrpla2013.net/ ,semoga bermanfaat bagi kalian :D

Balas

walah, masih belum ngerti yang beginian

Balas
Komentar ini telah dihapus oleh pengarang.

kode
<script type="text/javascript">
//<![CDATA[
$(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();
});
});
//]]>
</script>

ditempatkan dimana ya kang hehe :D

Balas

Kang, kalau mau ngubah tampilan buttonnya gimana?

Balas

Untuk Mengganti Button Nya Bagaimana Kang

Balas

kang kok punya saya langsung muncul ya, kalo biar gak langsung muncul harus di klik button nya dulou gimana kang?

Balas

kang tanya dong.. kalo mau bikin light box cuma nongol di home itu gimana??
mohon bimbingan.. :D

Balas

gak bisa kang =( mohon bimbingannya silahkan di cek
http://clickandskip.blogspot.com

Balas

kang, ajarin donk, gak mau muncul boxnya

Balas
Komentar ini telah dihapus oleh pengarang.

Kalau nggak bisa tanya saya aja... ^_^ http://bbmasterpiece.blogspot.com/

Balas

Poskan Komentar


×
Chat