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

เขียนเมื่อ 11 ปีก่อน โดย Ninenik Narkdee
css ข้อความ jquery

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



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

Information notice
คลิกเพื่อดูตัวอย่าง


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











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











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