สร้างกล่อง alert ข้อความเฉพาะตัว ด้วย jQuery และ CSS อย่างง่าย

Javascript Code

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function(){
	$("span.close").click(function(){
		$(this).parents("div.myAlert").hide('fast');
	});
	$(".DmyAlert button").click(function(){
		$(this).parents("div.myAlert").hide('fast');
	});
});
function alm(msg){
	var nLeft=($(window).width()/2)-125;
	$("div.DetailAl").html(msg);	
	$("div.myAlert").css({
		position:"fixed",
		left:nLeft,
		top:200
	}).fadeIn('fast');
}
</script>

CSS Code

<style type="text/css">
.myAlert{
	width:250px;
	height:100px;
	border:2px solid #50A7D2;
	background-color:#F1F5FE;
	font-size:12px;
	display:none;
}
.HmyAlert{
	width:100%;
	float:left;
	height:20px;
	border:0px solid #50A7D2;
	background:url(bg_myalert.gif) right top no-repeat;
	font-size:12px;
	text-indent:3px;
	color:#FFFFFF;	
}
.HmyAlert span.close{
	float:right;
	display:block;
	height:20px;
	width:30px;
	cursor:pointer;
}
.HmyAlert span.iTitle{
	float:left;
	display:block;
	height:20px;
/*	background-color:#FFCC00;*/
}
.DmyAlert button{
	position:relative;
	margin-left:115px;
	margin-top:0px;
	border:1px solid #50A7D;
	background-color:#EAEAEA;
	cursor:pointer;
}
.DetailAl{
	width:95%;
	height:45px;
	margin:3px;
}
</style>

HTML Code แทรกในเท็ก body

<div class="myAlert">
<div class="HmyAlert">
<span class="iTitle">Information notice</span>
<span class="close"></span></div>
<div class="DmyAlert">
<div class="DetailAl"></div>
<button>OK</button>
</div>
</div>
<!--
ตัวอย่างการใช้งาน  alm('ข้อความที่ต้องการแสดง');
-->
<a href="javascript:alm('My Alert Text Show Here');">Test</a>

รูปสำหรับใช้ใน css