ประยุกต์การทำ overlay เพจ กับกล่องข้อความ ด้วย jQuery

css code สำหรับกล่องข้อความ จัดรูปแบบตามต้องการ

<style type="text/css">
div.alertBox{
	border:5px solid #33CC00;
	background-color:#F5FEED;
	width:300px;
	margin:auto;
	height:75px;
	text-align:center;
	font-size:12px;
}
</style>

HTML ปุ่ม สำหรับตัวอย่าง code

<input type="button" name="btAddOverlay" id="btAddOverlay" value="ตัวอย่างคลิก" />

javascript code

<script src="http://www.google.com/jsapi" type="text/javascript"></script>     
<script type="text/javascript">     
google.load("jquery", "1.3.2");     
</script> 
<script type="text/javascript">
$(function(){
	var OverlayObj="<div class='overlay'><div class='alertBox'></div></div>";
	$("#btAddOverlay").click(function(){
		$(document.body).prepend(OverlayObj);
		$("div.overlay").css({
				position:"absolute",  
				top:0,
				left: 0,   
				background:"#000",   
				width:"100%", 
				height:$(document).height(),   
				opacity:.7			
		});
		$("div.alertBox").animate({
			marginTop:150
		},500).html("<br>จัดรูปแบบกล่องข้อความ นี้ใน css class<br>Click to close");
		$("div.alertBox").bind('click',function(){
			$("div.overlay").fadeOut("fast");
		});		
	});
});
</script>

ตัวอย่างคลิก ตัวอย่าง