删除数据时的提示效果(遮罩)
（1）需求如下：
1、当用户单机“删除”按钮时，整个页面背景类似于关机效果，“删除”提示框突出显示，用户可以选“关闭”按钮，或单机“确定”或“取消的操作。
2、删除提示框一直居中显示，不论页面大小发生如何变化，这个提示框始终居中显示。
3、如果对某条记录打狗，当用户单机确定提示框中的“确定”按钮时，将在页面中删除该条记录，同时关闭提示框，页面背景恢复正常。
（2）实现代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>删除记录时的提示效果</title> 5 <script type="text/javascript" 6 src="Jscript/jquery-1.4.2-vsdoc.js"> 7 </script> 8 <script type="text/javascript" 9 src="Jscript/jquery-1.4.2.js"> 10 </script> 11 <style type="text/css"> 12 body{font-size:13px} 13 .divShow{line-height:32px;height:32px;background-color:#eee;width:280px;padding-left:10px} 14 .divShow span{padding-left:50px} 15 .dialog{width:360px;border:solid 5px #666;position:absolute;display:none;z-index:101} 16 .dialog .title{background-color:#fbaf15;padding:10px;color:#fff;font-weight:bold} 17 .dialog .title img{float:right} 18 .dialog .content{background-color:#fff;padding:25px;height:60px} 19 .dialog .content img{float:left} 20 .dialog .content span{float:left;padding-top:10px;padding-left:10px} 21 .dialog .bottom{text-align:right;padding:10px 10px 10px 0px;background-color:#eee} 22 .mask {width:100%;height:100%; background-color:#000;position:absolute; 23 top:0px;left:0px;filter:alpha(opacity=30);display:none;z-index:100} 24 .btn {border:#666 1px solid;padding:2px;width:65px; 25 filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);} 26 </style> 27 <script type="text/javascript"> 28 $(function() { 29 $("#Button1").click(function() { //注册删除按钮点击事件 30 $(".mask").show(); //显示背景色 31 showDialog(); //设置提示对话框的Top与Left 32 $(".dialog").show(); //显示提示对话框 33 }) 34 /* 35 *根据当前页面与滚动条位置，设置提示对话框的Top与Left 36 */ 37 function showDialog() { 38 var objW = $(window); //当前窗口 39 var objC = $(".dialog"); //对话框 40 var brsW = objW.width(); 41 var brsH = objW.height(); 42 var sclL = objW.scrollLeft(); 43 var sclT = objW.scrollTop(); 44 var curW = objC.width(); 45 var curH = objC.height(); 46 //计算对话框居中时的左边距 47 var left = sclL + (brsW - curW) / 2; 48 //计算对话框居中时的上边距 49 var top = sclT + (brsH - curH) / 2; 50 //设置对话框在页面中的位置 51 objC.css({ "left": left, "top": top }); 52 } 53 54 $(window).resize(function() {//页面窗口大小改变事件 55 if (!$(".dialog").is(":visible")) { 56 return; 57 } 58 showDialog(); //设置提示对话框的Top与Left 59 }); 60 61 $(".title img").click(function() { //注册关闭图片点击事件 62 $(".dialog").hide(); 63 $(".mask").hide(); 64 }) 65 66 $("#Button3").click(function() {//注册取消按钮点击事件 67 $(".dialog").hide(); 68 $(".mask").hide(); 69 }) 70 71 $("#Button2").click(function() {//注册确定按钮点击事件 72 $(".dialog").hide(); 73 $(".mask").hide(); 74 if ($("input:checked").length != 0) {//如果选择了删除行 75 $(".divShow").remove(); //删除某行数据 76 } 77 }) 78 }) 79 </script> 80 </head> 81 <body> 82 <div class="divShow"> 83 <input id="Checkbox1" type="checkbox" /> 84 <a href="#">这是一条可删除的记录</a> 85 <span> 86 <input id="Button1" type="button" value="删除" class="btn" /> 87 </span> 88 </div> 89 <div class="mask"></div> 90 <div class="dialog"> 91 <div class="title"> 92 <img src="Images/close.gif" alt="点击可以关闭" />删除时提示 93 </div> 94 <div class="content"> 95 <img src="Images/delete.jpg" alt="" /><span>您真的要删除该条记录吗？</span> 96 </div> 97 <div class="bottom"> 98 <input id="Button2" type="button" value="确定" class="btn"/> 99 <input id="Button3" type="button" value="取消" class="btn"/> 100 </div> 101 </div> 102 </body> 103 </html>
结果如下图所示：