参考资料:陶国荣著《jQuery权威指南》P107之4.8综合案例分析——删除数据时的提示效果在项目中的应用
说明:本版本为调试版,是因为增加了很多调试过程中产生的边框。
外部引入文件有:jQuery库文件和两张图片。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>删除记录时的提示效果</title> <style type="text/css"> body{ font-size: 13px; } .divShow{ line-height: 32px; /*该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。*/ height: 32px; background-color: #eee; width: 280px; } .divShow span{ border:1px red solid; padding-left: 50px; } .dialog{ width: 360px; border: 5px solid #666; position: absolute;/*设置成绝对定位,未知作用*/ display: none;/**/ z-index: 101; } .dialog .title{ border: 1px solid #0f0; background-color: #fbaf15; padding: 10px;/*撑开了div的宽度和高度*/ color: #fff;/*字体颜色为白色*/ font-weight: bolder;/*加粗*/ } .dialog .title img{ float: right; } .dialog .content{ background: #fff; padding: 25px;/*撑开了上下左右的距离*/ height: 60px; } .dialog .content img{ float: left; } .dialog .content span{ float: left; border:1px solid #FF0000; padding-top: 10px; padding-left: 10px; } .dialog .buttom{ background-color:#eee; text-align: right;/*把按钮也向右靠齐了*/ padding: 10px 10px 10px 0px; } .mask{ border:1px solid #0f0; background-color: #f00; display:none; width: 100%; height: 100%; position: absolute;/*设置了绝对定位以后,高度占满了整个页面*/ top: 0px;/*设置了绝对定位以后,top值才会有效*/ left: 0px; } </style> <script type="text/javascript" src="js/jquery-1.10.2.js"></script> <script type="text/javascript"> $(function(){ $("#button1").click(function(){ $(".mask").show(); showDialog(); $(".dialog").show(); }); // 当调整浏览器窗口的大小时,发生 resize 事件。 $(window).resize(function(){ var flag = $(".dialog").is(":visible"); // alert(flag); if(!flag){ return; } showDialog(); //重新显示对话框 }); // 关闭事件(实现功能:当点击关闭图片的时候,遮罩层和对话框都消失) $(".title img").click(function(){ $(".dialog").hide(); $(".mask").hide(); }); // 注册取消按钮点击事件 $("#button3").click(function(){ $(".dialog").hide(); $(".mask").hide(); }); // 注册确定按钮点击事件 $("#button2").click(function(){ $(".dialog").hide(); $(".mask").hide(); var length = $("input:checked").length; if(length!=0){ $(".divShow").remove(); } }); }); function showDialog(){ var objW = $(window); // 当前窗口 var objC = $(".dialog"); // 对话框 var brsW = objW.width(); // 当前用户的浏览器窗口的宽度 var brsH = objW.height(); // 当前用户的浏览器窗口的高度 //alert(brsW + "," + brsH); var sclL = objW.scrollLeft();//返回第一个匹配元素的水平滚动条位置。这里要查文档。 var sclT = objW.scrollTop(); var curW = objC.width(); var curH = objC.height(); // alert(sclL + "," + sclT); // alert(curW + "," + curH); // 设置左边距和上边距使得对话框居中(最关键的地方) var left = sclL + (brsW-curW)/2; var top = sclT + (brsH-curH)/2; objC.css( { "left":left, "top":top } ); } </script> <meta name="author" content="Administrator" /> <!-- Date: 2014-08-24 --> </head> <body> <div class="divShow"> <input type="checkbox" id="checkbox1"/> <a href="#">这是一条可以删除的记录</a> <span> <input type="button" id="button1" value="删除" class="btn" /> </span> </div> <div class="mask"> 这是隐藏的遮罩层 </div> <div class="dialog"> <!-- 对话框里面有三层div,标题层,内容层,按钮层 --> <div class="title" style="border: 1px solid #f00"> <img src="images/close.gif" alt="点击可以关闭" />删除时候提示 </div> <div class="content" style="border: 1px solid #0f0"> <img src="images/delete.jpg" /><span>您真的要删除该记录吗?</span> </div> <div class="buttom" style="border: 1px solid #00f"> <input type="button" id="button2" value="确定" /> <input type="button" id="button3" value="取消" /> </div> </div> </body> </html>
时间: 2024-10-09 23:31:52