<script src="jquery.js"></script>
<style>
.bg{display:none;position:absolute;width:100%;height:100%;background:#000;z-index:2;top:0;left:0;opacity:0.7;filter:alpha(opacity=70);}
.content{display:none;width:500px;height:300px;position:absolute;top:50%;margin-top:-150px;background:#fff;z-index:3;left:50%;margin-left:-250px;}
</style>
<div class="click">Click here</div>
<div class="click1">Click here too.</div>
<div class="bg"></div>
<div class="content">Hello! World</div>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>Hello! World.
<script>
$(function(){
$('.click').click(function(){
$('.bg').css({'display':'block'});
$('.content').css({'display':'block'});
});
$('.click1').click(function(){
$('.bg').fadeIn(200);
$('.content').fadeIn(400);
});
$('.bg').click(function(){
$('.bg').fadeOut(200);
$('.content').fadeOut(200);
});
});
</script>