Javascript Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 | <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
