Bagaimana Cara Membuat Dialog Box Info Terbaik Dan Keren

Cara Bagaimana Cara Membuat Dialog Box Info Terbaik Dan Keren

Langkah Langkah

• 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Mw6LmwgHdPuSQzUAIJShq78Ci3nsYGRtgOgortxzPDLV-FUDIaeBYe1h23BuO41Mdpqem1zJQIQfpshWv6D2AqKYO4ZyoyHKWOCywD0b8cPWxMPDWny_zW7FL4d9-2_MZlgwTPdBLfY/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0l7iRLmCyyK-UM0CHKP3b0UUwHZyhX1k0xri23xinMqqRsw2UbVtgi072SOP13cTvtGVAgX453IIMAyfJFrRjrST25MjTaeJYgHt14uQ8YddS8wS4th8Nmze59yaMSBz865ji8T-PQU7y/s1600/30.gif" original="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0l7iRLmCyyK-UM0CHKP3b0UUwHZyhX1k0xri23xinMqqRsw2UbVtgi072SOP13cTvtGVAgX453IIMAyfJFrRjrST25MjTaeJYgHt14uQ8YddS8wS4th8Nmze59yaMSBz865ji8T-PQU7y/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