Dialog Box Blogger With Jquery FadeIn and FadeOut

Dialog Box Blogger With Jquery FadeIn and FadeOut

Ini adalah sebagian dari Project saya, Dialog Box Blogger With Jquery FadeIn and FadeOut.

DEMO

CSS

#info:before { content : "Info"; position : fixed; top : 21px; left : 275px; border-radius : 3px; background-color : #1abc9c; color : #fff; padding : 5px 10px; z-index : 999; cursor : pointer; font-size : 12px; font-weight : bold; } 
#dialog-box { position : fixed; top : 30%; left : 25%; right : 25% ; 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; font : 13px; padding : 15px; text-align : justify; z-index : 999; display : none; } 
#dialog-overlay { position : fixed !important ; position : absolute; z-index : 999; top : 0; right : 0; bottom : 0; left : 0; background : none; display : none; } 
.close:after { content : url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx2LjYD3sdgzkak2llodQo8RPp7z5QaDoJ9VcIhkOM8eA0dQXc6dfDy-yKOdIkXKFzQtWXyVA_QTpUhW2Nph5IXlJR_BB82HMzyF8mtJZgvy2duhosWdj4KGiDn4kkYNt-kGuvzT8tjio/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; } 
.ttd:after { content : "SMZ"; position : relative; float : right; }

HTML

<div id='info'></div>
<div id='dialog-overlay'></div>
<div id='dialog-box'>
Di ijinkan untuk mengutip sebagian tulisan di situs ini - tidak boleh seluruhnya - dengan menyebutkan link dan sumber. Apabila ditemukan copy/paste seluruh artikel akan diajukan ke DMCA Google supaya dibanned dari Google atau dihapus dari Blogger.
Buat sahabat Blog SMZ yang merasa mencopy paste Artikel silahkan sertakan sumbernya, sebelum anda mendapat warning dari pihak Google. Jika Blog Anda di hapus oleh pihak Google saya tidak bertanggung jawab.<br/><br/>
<span class='ttd'></span>
<div class='close' title='Close Dialog'></div>
</div>

Lalu Javascript

<script type='text/javascript'>
$(function() {
     $('#info').click(function() {
          $('#dialog-box').fadeIn();
          $('#dialog-overlay').fadeTo("normal", 0.4);
          $('#smzwrapper').css({background: '#123',transition: 'all 5s'})
          $('#info').fadeOut();
     });
     $('.close').click(function() {
          $('#dialog-box').fadeOut();
          $('#dialog-overlay').hide();
          $('#smzwrapper').css({background: '#ecf0f1',transition: 'all 5s'})
     });
});</script>

Tweet