Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Membuat Simple Dialog Box Dengan JQuery

Membuat kotak dialog / dialog box yang muncul setelah klik tombol, dengan sentuhan jQuery.
dialog box
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.

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 :

Demo - Try it
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'

Demo - Try it

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

Demo - Try it
Selamat mencoba, semoga bermanfaat...

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

141 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Seperti biasa ambil bonus dulu hehhehhe
    1. yang jelas ini bermanfaat kang hehhehe :D akhirnya bisa dimodif sesuai keperluan :D
    2. langsung di samber yeuh :D
    3. Kok selalu no 1 :(
  2. ketinggalan lagi , oment dulu ah
    1. sampe salah ketik " koment" hehe baru baca deh
  3. Cepet banget mas adi -_-
    Saya gak pernah dapet pertamax :D
    1. enya.. nyamberna pangpayuna :D
  4. Telat beberapa menit euy :p
  5. ctrl+d dulu deh :)
  6. cukup mudah dipahami, tapi saya belum berniat untuk membuat dialog box jadi cuma nyimak+memahami fungsi2nya saja hehehe
    1. silahkan di simpen dulu :D
  7. Yang pneting udah baca hehehehe, banyak banget kodenya kang untuk buat kotak dialog yang kecil :(
    1. kalau disimak baik2 sebetulnya tidak terlalu banyak.. kebawahnya hanya pengulangan dan penjabaran saja
  8. Menarik artikelnya Kang ijin simak tapi
    Mendingan baca dulu agar lebih paham
  9. Keren banget, kang!
    Btw, posisi penampakannya bisa diatur gak kang?
    Kalu bisa, cara na kumaha?
    1. 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*/
      }
  10. 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...???
    1. kenapa ga bisa diterapkan ya? :D
  11. 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 :)
    1. coba simpan .post-share-buttons {display:none} di atas ]]></b:skin>
  12. ini bisa buat semua yah kang termasuk link download jadi inti nya memunculkannya via dialog box
    mantaf kang :d
    1. buat apa aja bisa kang:D
  13. Ini yang lagi aku cari" :D
  14. ijin tes drive om....!
  15. Kapan - kapan kalau ada waktu akan saya terapkan mas. Matur nuwun atas tutornya.
  16. Camkoha...sangat berkualitas artikelnya kang..
  17. Kang kalo tombol dialog boxnya mau dihilangin secara otomatis setelah dibaca bagaiman kang??
    Seperti yang di blognya Kang Ismet :)
    1. 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 :)
  18. 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
    1. tos nikah cenah ayeunamah, bieu ka KUA :D request neon ateuh?
  19. makasih infonya bermanfaat akan dicoba nanti ..
  20. makasi infonya kang,,, izin sedot
  21. Top kang....hehehe
    Ijin coba dulu, untuk makainya ntar dulu deh...hehe
  22. wah boleh jg nih, buat ucapan selamat datang :D
    trims
  23. mantapp patut dicoba nih...
  24. keren kang.. disimpan dulu scriptnya kapan-kapan dicoba :D
  25. satu lagi widget dari kangismet yang saya pasang di blog saya :)
    lanjutkan share widget menarik lainnya kang...
  26. gak kriting ya kang jarinya bisa membuat sedetail gini?? :-bd kalau saya sudah pasti kriting jarinya hehehehe...
    1. baru pulang rebonding jarinya :D
  27. wah bisa dicoba nih kang, hatur nuhun kang
  28. Terimakasih Kang, tutornya ... :) Dari kemarin sebetulnya saya penasaran dengan membuat dialog seperti ini .. :)
  29. kang kalo dialog-box nya muncul otomatis namun hanya pada pertama kali halaman dibuka dan seterusnya tidak muncul itu gimana caranya? apa pakai cookie?
    1. pakai cookie sama scriptnya onload
  30. Tapi ada yang versi Pure CSS-nya juga kan kang? yang pake ::focus atau :checked?
    1. bisa sih, tapi panjang CSSnya :)
  31. 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
  32. 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
  33. 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/
  34. kudu nyimak bener2 nih agak ribet nih
  35. mantap nihh, tapi belum minat untuk di pasang di blog ane :)
  36. Yang disitu bukan kode <div> kang, tapi kode </div> kali kang :) :p
    1. 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 :(
    2. maksudnya bukan <div> tapi </div> gimana?
      itu JSnya salah bukan $('.info-depan').click(function() { harusnya $('#info').click(function() {
  37. 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
    1. kalau .animate harus ditambahkan jquery UI, perasaan udah ada yang posting kang kalau demo jsfiddle itu :)
  38. kang tolong bantu saya komentar hehe
    cikan urang cobian kang sugan tiasa ...
    1. maksudnyah kumaha kang?
  39. Gojek Ewako
    Komentar ini telah dihapus oleh pengarang.
  40. 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]
    1. gimana apanya? buletnya? warna-warni? ada panahnya? atau apanya :)
  41. 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 :)
    1. silahkan acak2 aja :D
  42. sae... sae kang (bari teu ngarti???) wkwkwkwkwk
    1. jiakakakkak... ngacuuung :D
  43. kang ismet gimana sih cara buat emoticon seperti di blog kang ismet ?
    1. yang komentar apa postingan?
  44. wess mantap banget kang dialog box nya
  45. Kang saya mau nanya nih, gimana cara membuat tombol info kaya akang ini??..
    mohon jawabannya..

    http://hilbramkurnia3.blogspot.com/
    1. kan itu diatas udah tutorialnya....
  46. ini dia tutor yang ditunggu tunggu *yeay
  47. 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... :)
  48. 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.
  49. mohon di beri pemberitahuan kang is apabila disetujui .
    assalamu alaikum .
  50. A Version With Only CSS
  51. kalo bikin dialog box kayak di website lazada yang bagian PENGIRIMAN, apa sama dg ini kang?
  52. Mantap gan..
    lumayan bsa buat d website
  53. <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 ?
    1. bisa.. tapi konverternya tetep harus iframe
  54. sumpah keren banget kang saya pakai di menu, hehe
  55. kang cara ganti background "Munculkan dialog" itu gimana? :o
  56. Keren lah, visit deh web aku ini http://grandistya.xrpla2013.net/ ,semoga bermanfaat bagi kalian :D
  57. walah, masih belum ngerti yang beginian
  58. Unknown
    Komentar ini telah dihapus oleh pengarang.
  59. 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
  60. Kang, kalau mau ngubah tampilan buttonnya gimana?
  61. Untuk Mengganti Button Nya Bagaimana Kang
  62. kang kok punya saya langsung muncul ya, kalo biar gak langsung muncul harus di klik button nya dulou gimana kang?
  63. kang tanya dong.. kalo mau bikin light box cuma nongol di home itu gimana??
    mohon bimbingan.. :D
  64. gak bisa kang =( mohon bimbingannya silahkan di cek
    http://clickandskip.blogspot.com
  65. kang, ajarin donk, gak mau muncul boxnya
  66. Unknown
    Komentar ini telah dihapus oleh pengarang.
  67. Kalau nggak bisa tanya saya aja... ^_^ http://bbmasterpiece.blogspot.com/
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.