Membuat Simple Dialog Box Dengan JQuery
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
Buat juga CSS untuk menutup kotak dialog yang nantinya berupa tanda silang (X) atau tombol OK
Setelah itu buat kode HTMLnya, tambahkan juga html untuk tombol yang nantinya dipakai untuk membuka kotak dialog, simpan diatas
hasilnya seperti ini :
Dialog diatas belum bisa di apa-apain karena kita belum menambahkan bumbu
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
Inilah perintah jQuery untuk menutup dan membuka kotak dialog, simpan diatas
Sekarang coba klik tombol 'Munculkan Dialog' setelah muncul klik 'OK'
Kode CSS untuk overlay kurang lebih seperti ini :
Setelah selesai dengan CSS, kita tambahkan HTMLnya pada HTML yang telah kita buat di atas
Tambahkan juga pada fungsi jQuery, supaya terbuka dan tertutup. Pada saat terbuka, saya menggunakan
Maka setelah penambahan overlay hasilnya seperti ini
Selamat mencoba, semoga bermanfaat...

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 dengandisplay: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
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
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
http://clickandskip.blogspot.com
mohon bimbingan.. :D
<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
//<![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 ?
lumayan bsa buat d website
assalamu alaikum .
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.
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... :)
mohon jawabannya..
http://hilbramkurnia3.blogspot.com/
Selanjutnya akan saya "acak2" blog ini hehe.. Maksudnya cari ilmu yang bermanfaat di blog ini :)
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]
cikan urang cobian kang sugan tiasa ...
itu JSnya salah bukan $('.info-depan').click(function() { harusnya $('#info').click(function() {
http://hilbramkurnia3.blogspot.com/
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
meni hebring kitu eta si jquery teh nya jiga tukang sulap ... menatap kang eh mantapzzzz
lanjutkan share widget menarik lainnya kang...
trims
Ijin coba dulu, untuk makainya ntar dulu deh...hehe
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
Seperti yang di blognya Kang Ismet :)
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 :)
mantaf kang :d
Btw, posisi penampakannya bisa diatur gak kang?
Kalu bisa, cara na kumaha?
#dialog-box{
....
....
top:50px; /*atur ketinggian disini*/
left:40px; /*atur batas dari kiri atau gunakan right untuk jarak dari kanan*/
}
Mendingan baca dulu agar lebih paham
Saya gak pernah dapet pertamax :D