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

เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdee
กล่องข้อความ jquery overlay

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

ดูแล้ว 15,579 ครั้ง


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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







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