PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

01 February 2009 By
ข้อความ jquery msn

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ข้อความ jquery msn



<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>

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

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







Tags:: ข้อความ msn jquery






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง