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