首页 > 代码库 > 使用jQuery实现遮罩效果的代码（调试版）
使用jQuery实现遮罩效果的代码（调试版）
参考资料：陶国荣著《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="http://www.mamicode.com/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="http://www.mamicode.com/#">这是一条可以删除的记录</a> <span> <input type="button" id="button1" value="http://www.mamicode.com/删除" class="btn" /> </span> </div> <div class="mask"> 这是隐藏的遮罩层 </div> <div class="dialog"> <!-- 对话框里面有三层div，标题层，内容层，按钮层 --> <div class="title" style="border: 1px solid #f00"> <img src="http://www.mamicode.com/images/close.gif" alt="点击可以关闭" />删除时候提示 </div> <div class="content" style="border: 1px solid #0f0"> <img src="http://www.mamicode.com/images/delete.jpg" /><span>您真的要删除该记录吗？</span> </div> <div class="buttom" style="border: 1px solid #00f"> <input type="button" id="button2" value="http://www.mamicode.com/确定" /> <input type="button" id="button3" value="http://www.mamicode.com/取消" /> </div> </div> </body></html>
使用jQuery实现遮罩效果的代码（调试版）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。