使用jQuery实现遮罩效果的代码（调试版）
浏览数：45 /
时间：2015年06月09日
参考资料：陶国荣著《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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
