SMZ Dialog

by Maz Soma

HTML

<div id='info'></div>
<div id='dialog-overlay'></div>
<div id='dialog-box'>
Dialog box Sederhana dengan penambahan text yang panjang. Semoga anda mengerti tata cara blogger yang baik yaitu selalu berkunjung dengan meninggalkan jejak berupa komentar. Benang-benang Doflamingo menutupi keseluruhan kerajaan. Sebuah bentuk kubah seperti sebuah sangkar burung. Seorang bajak laut mencoba melarikan diri, tapi dia lari ke arah benang yang tajam. Benang-benang itu mengiris setengah topinya dan melukainya.
Angkatan laut yang berada di dekat Bastille melaporkan bahwa komunikasi mereka dengan Markas Besar telah terputus.

Sementara itu Doflamingo melemparkan benang-benang ke seluruh kota “Teknik Parasite”, membuat para penduduk dan angkatan laut saling bertarung satu sama lain. Pica berasimilasi dengan tanah, memindahkan istana kerajaan menjauh dan menaikaan seluruh area ladang bunga, termasuk pabrik. Naik ke atas. Regards<br/><br/>
<span class='ttd'></span>
<div class='close' title='Close Dialog'></div>
</div>

CSS

#info:before { content : "Info"; position : fixed; top : 21px; left : 275px; border-radius : 3px; background-color : #1191DA; 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 : #1191DA; 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('http://2.bp.blogspot.com/-d-5BS0YCkho/UOKe2UIw0rI/AAAAAAAAC4w/md_iYNVHaHk/s1600/delete4.png'); position : absolute; top : -15px; right : -15px; background : #1191DA; 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; }

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'})
     });
});