สร้างกล่องแจ้งข้อความ คล้าย MSN ด้วย jQuery

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function(){
	$("div#popupbox").click(function(){ // สำหรับคลิกเพื่อปิด
		$(this).hide();
	});
	var IDPop=setTimeout("iPopUp()",3000); // กำหนดให้แสดงหลัง 3 วินาที
	$(window).resize(function(){ // กรณีมีการกำหนดขนาดหน้าต่างบราวเซอร์
		var popup_y=$(window).height()-$("div#popupbox").height()-3;
		var popup_x=$(window).width()-$("div#popupbox").width()-3;		
		$("div#popupbox").css({
			top:popup_y,
			left:popup_x
		});
	});
});
function iPopUp(){ // ฟังก์ชันแสดง popup
	var popup_y=$(window).height()-$("div#popupbox").height()-3;
	var popup_x=$(window).width()-$("div#popupbox").width()-3;		
	$("span").html(popup_x+"  "+popup_y);
	$("div#popupbox").css({
		top:popup_y,
		left:popup_x
	});
	$("div#popupbox").show();
	setTimeout("iPopUpHide()",5000); // กำหนดให้ปิดเองภายใน 5 วินาที
}
function iPopUpHide(){
	$("div#popupbox").hide();
}
</script>
<style type="text/css">
div#popupbox{
	width:175px;
	font-size:12px;
	color:#336699;
	height:120px;
	background:url(images/bg_popup.gif) no-repeat left top;
	position:fixed;
	display:none;
	text-align:center;
	cursor:pointer;
}	
</style>
<div id="popupbox">
<br />
<br />
<br />
<p>สวัสดีครับ</p>
</div>

สามารถนำไปประยุกต์ใช้งานได้

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