Headline
Loading...

Membuat Dialog Box Info Terbaik


  • Letakan kode dibawah ini di atas ]]></b:skin> atau </style>

#info:before {
content: "Info";
position: fixed;
top: 25px;
left: 175px;
border-radius: 3px;
background-color: #e74c3c;
color: #fff;
padding: 5px 10px;
z-index: 999;
cursor: pointer;
font-size: 12px;
font-weight: bold;
}
#dialog-overlay {
position: fixed !important;
position: absolute;
z-index: 999;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #2c3e50;
display: none;
}
#dialog-box {
position: fixed;
top: 30%;
left: 17%;
right: 29%;
line-height: 1.5em;
font-size: 14px;
color: #fff;
background: #159999;
border: #2c3e50 solid 3px;
box-shadow: 0 0 2px 1px #2c3e50, 0 0 10px black;
padding: 15px;
text-align: justify;
z-index: 999;
display: none;
}
#dialog-box {
position: fixed;
top: 30%;
left: 17%;
right: 29%;
line-height: 1.5em;
font-size: 14px;
color: #fff;
background: #e74c3c;
border: #2c3e50 solid 3px;
box-shadow: 0 0 2px 1px #2c3e50, 0 0 10px black;
padding: 15px;
text-align: justify;
z-index: 999;
display: none;
}
.ttd:after {
content: "Sanggar";
position: relative;
float: right;
}
.closer:after {
content: url('http://2.bp.blogspot.com/-d-5BS0YCkho/UOKe2UIw0rI/AAAAAAAAC4w/md_iYNVHaHk/s1600/delete4.png');
position: absolute;
top: -15px;
right: -15px;
background: #e74c3c;
border-radius: 100%;
padding: 8px 12px;
z-index: 999;
cursor: pointer;
border-top: 3px solid #2c3e50;
border-right: 3px solid #2c3e50;
}

Fungsi JQuery

Letakan kode dibawah ini di atas </body>
<script type='text/javascript'>
$(function () {
 $(&#39;#info&#39;).click(function () {
  $(&#39;#info&#39;).fadeOut();
  $(&#39;#dialog-box&#39;).fadeIn();
  $(&#39;#dialog-overlay&#39;).fadeTo(&quot;normal&quot;, 0.4);
});
 $(&#39;.closer&#39;).click(function () {
  $(&#39;#info&#39;).fadeIn();
  $(&#39;#dialog-box&#39;).fadeOut();
  $(&#39;#dialog-overlay&#39;).fadeOut();
 })
});
</script>
Setelah itu simpan.

Penerapan

Agar Dialog Boxnya muncul letakan kode dibawah ini di HTML/JavaScript.
<div id="info"></div>
<div id="dialog-overlay"></div>
<div id="dialog-box" style="font-weight:bold;">
<img src="http://4.bp.blogspot.com/-R1_xwYSED8I/U3Ne1sI-6JI/AAAAAAAABZA/LNjQ_HQZzlM/s1600/30.gif" original="http://4.bp.blogspot.com/-R1_xwYSED8I/U3Ne1sI-6JI/AAAAAAAABZA/LNjQ_HQZzlM/s1600/30.gif" style="" />Welcome to my blog!!!<br />
Anda Disini di Ijinkan untuk mengutip sebagian tulisan di situs ini tetapi tidak boleh seluruhnya dengan menyebutkan link dan sumber.<br /> Apabila ditemukan copy/paste seluruh artikel akan diajukan ke DMCA Google supaya dibanned dari Google atau dihapus dari Blogger. Buat sahabat Mr.hb404 yang merasa mencopy paste Artikel silahkan sertakan sumbernya, sebelum anda mendapat PERINGATAN dari pihak Google. <br />Jika Blog Anda di hapus oleh pihak Google saya tidak bertanggung jawab !!!<br /><br /><img src="http://1.bp.blogspot.com/-s-_WBU5Gs5M/Us1XTj1xPXI/AAAAAAABGqk/ZTw9DE8Novc/s1600/thumbs-up-yahoo-emoticon.gif" original="http://1.bp.blogspot.com/-s-_WBU5Gs5M/Us1XTj1xPXI/AAAAAAABGqk/ZTw9DE8Novc/s1600/thumbs-up-yahoo-emoticon.gif" style="" /><br /><br />
<span class="ttd"></span>
<div class="closer" title="Close"></div>
</div>

Keterangan

  • Yang ditandai warna merah bisa kamu ganti dengan Nama kamu.
  • Yang ditandai warna biru bisa kamu ganti dengan kata kata yang kamu suka.
  • Sumber  http://mrhb404.blogspot.com/2014/07/cara-membuat-dialog-box-keren.html
di 09.08

2 komentar

Khoazis delete 9/14/2014

sumbernya gan :)

oK....

1. Berikan Komentar Anda Sesuai dengan Judul Artikel.
2. Komentar yang menyertakan link aktif, iklan, atau titip link, akan dimasukan ke folder SPAM.
3. Untuk pertanyaan Out Of Topic ( OOT ) silahkan klik Forum

Konversi KodeEmotionForum

Back to Top