Display Message Modal Window with jQuery Plugins

Walau artikelnya masih sedikit bukan berarti tidak bermutu! Menurut saya sendiri yang penting isi dari artikel tersebut kena dan mengenai serta mudah dipahami dalam penjelasan :) Berasal dari negara Scotland dan telah banyak bekerja dengan team-team dari lain negara, membuat kepribadian si pemilik weblog ini memutuskan untuk membuat konten dalam bahasa inggris. He says "Sometimes I just sit and think, …and sometimes I just sit" Kadang orang yg banyak berpikir suka luas ide dan ilmunya sob. Asal jangan berpikir, dan ngelamun saja...bisa gelo itu mah =))

Shoogle, 30 tahun berfokus pada pelanggan freelance web designer. Menghabiskan sebagian besar waktunya dgn merancang, menggambarkan dan menulis tentang subyek tersebut. Kita mungkin akan menemukan di webnya beberapa teknik grafisnya, web coding dan bahkan lebih melalui dummy-proof tutorials. Salah satu yg akan Beben si bloglang anu ganteng kalem tea share disini mengenai Display a special message to your visitors with an easy to code jQuery modal window Menampilkan sebuah pesan dalam bentuk modal window yg dapat ditutup itu loh sob ;) dan ini bekerja secara plugins. Screenshot ah Click Here for Screenshot Model Window

Kode CSS

#dark {
display: none;
background-color:#000;
position:fixed;
left:0;
top:0;
z-index:100;
}
#message {
display:none;
position:fixed;
left:0;
top:0;
z-index:101;
width:350px;
height:250px;
background-color:#FFFFFF;
border:1px solid #333;
-moz-border-radius: 20px;
-webkit-border-radius : 20px;
padding: 20px;
color: #666666;
}

jQuery Plugin

<script>
//<![CDATA[
$(document).ready(function() {
$(function() {
var WindowHeight = $(window).height();
var WindowWidth = $(window).width();
$('#dark').css({'width':WindowWidth,'height':WindowHeight});
$('#dark').fadeTo(2000,0.75);
$('#message').css('top', WindowHeight/2-$('#message').height()/2);
$('#message').css('left', WindowWidth/2-$('#message').width()/2);
$('#message').fadeIn(2000);
});
$('.close').click(function() {
$('#dark').fadeOut();
$('#message').fadeOut();
});
$('#dark').click(function () {
$('#dark').fadeOut();
$('#message').fadeOut();
});
});
//]]>
</script>

Kode HTML

Letakan didalam body template blog sobat!<div id="message">
<a href="#"class="close"/><img src="images/cross.png" align="right" /></a>
<p><img src="images.jpg" width="222" height="41" />
<p><b>Lorem ipsum (briefly, lipsum) is the text that is used habitually in graphical design in demonstrations of typographies or rough drafts of design to prove the visual design before inserting the final text. In this case it is also known him like greeking in English.</b></p>
<p><b>Once again, thanks to all!</b></p>
<p align="right">The Mobilytics Squad</p>
</div>
<div id="dark"></div>

Cek this out...http://shoogledesigns.com/blog/2010/07/21/push-the-minimalist-approach-one-step-further-by-hiding-site-navigation/ Hihihi :D :-h