PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

19 February 2009 By
ข้อความ jquery css

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



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
คลิกเพื่อดูตัวอย่าง






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






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


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