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

20 December 2009 By Ninenik Narkdee
jquery กล่องข้อความ overlay

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



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>

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



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





Tags:: กล่องข้อความ jquery overlay







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











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ