Here is the CSS code:
<style>
a.activator{
font-family:"Courier New", Courier, monospace;
font-size:36px;
text-decoration:none;
color:#666666;
font-weight:bold;
}
/* Style for overlay and box */
.overlay{
background:transparent url(images/overlay.png) repeat top left;
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;
}
.box{
position:fixed;
top:40%;
left:-450px;
background-color:#fff;
color:#7F7F7F;
padding:20px;
border:2px solid #ccc;
-moz-border-radius: 20px;
-webkit-border-radius:20px;
-khtml-border-radius:20px;
-moz-box-shadow: 0 1px 5px #333;
-webkit-box-shadow: 0 1px 5px #333;
z-index:101;
}
.box h1{
border-bottom: 1px dashed #7F7F7F;
margin:-20px -20px 0px -20px;
padding:10px;
background-color:#FFFFFF;
color:#666666;
-moz-border-radius:20px 20px 0px 0px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-khtml-border-top-left-radius: 20px;
-khtml-border-top-right-radius: 20px;
}
a.boxclose{
float:right;
width:26px;
height:26px;
background:transparent url(images/cancel.png) repeat top left;
margin-top:-30px;
margin-right:-30px;
cursor:pointer;
}
</style>
Here is the HTML code:
<!-- The overlay and the box -->
<a id="activator" class="activator" href="#">Click Me!</a>
<div class="overlay" id="overlay" style="display:none;"></div>
<div class="box" id="box">
<a class="boxclose" id="boxclose"></a>
<h1>Your Own Message</h1>
<p>The Message will be over hear.</p>
<p>You can do any thing in this box. Just make it. And enjoy it.</p>
</div>
Here is the jQuery code:
<!-- The JavaScript -->
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$('#activator').click(function(){
$('#overlay').fadeIn('fast',function(){
$('#box').animate({'left':'410px'},500);
});
});
$('#boxclose').click(function(){
$('#box').animate({'left':'-450px'},500,function(){
$('#overlay').fadeOut('fast');
});
});
});
</script>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$('#activator').click(function(){
$('#overlay').fadeIn('fast',function(){
$('#box').animate({'left':'410px'},500);
});
});
$('#boxclose').click(function(){
$('#box').animate({'left':'-450px'},500,function(){
$('#overlay').fadeOut('fast');
});
});
});
</script>
