读书笔记--删除数据时的提示效果在项目中的应用

最新推荐文章于 2022-01-05 19:23:37 发布

Basaly

最新推荐文章于 2022-01-05 19:23:37 发布

阅读量441

点赞数 1

分类专栏： jQuery笔记文章标签：数据删除读书笔记

本文链接：https://blog.csdn.net/qq_37697037/article/details/60466719

版权

jQuery笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

需求分析：

（1）当用户单击删除按钮时，整个页面背景类似于关机效果，“删除”提示框突出显示，用户可以选“关闭”按钮，或者单击“确定”或“取消”操作。

（2）删除提示框一直居中显示，不论页面带小发生如何变化

（3）如果对某条记录打钩，当用户单击提示框中的“确定”按钮时，将在页面中删除该条记录，同时关闭提示框，页面背景恢复正常

功能实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link type="text/css" href="css/lianxi.css" rel="stylesheet">
		<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
		<script type="text/javascript">
		  $(function(){
		  	$("#button1").click(function(){
		  		//注册删除按钮单击事件
		  		$(".mask").show();
		  		showDialog();//显示提示对话框的top与left
		  		$(".dialog").show();
		  	})
//		  	根据当前页面与滚动条位置,设置提示对话框的top与left
            function showDialog(){
            	var objW=$(window);//当前窗口
            	var objC=$(".dialog");//对话框
            	var brsW=objW.width();
            	var brsH=objW.height();
            	var sclL=objW.scrollLeft();//scrollTop指的是“元素中的内容”超出“元素上边界”的那部分的高度
            	var sclT=objW.scrollTop();
            	var curW=objC.width();
            	var curH=objC.height();
            	//计算对话框居中时的左边距
            	var left=sclL+(brsW-curW)/2;
            	//计算对话框居中时的上边距
            	var top=sclT+(brsH-curH)/2;
            	//设置对话框在页面中的位置
            	objC.css({"left":left,"top":top});
            }
            $(window).resize(function(){
            	//页面窗口大小改变事件
            	if(!$(".dialog").is(":visible")){
            		return;
            	}
            	showDialog();
            });
            $(".title img").click(function(){//注册关闭图片点击事件
            	$(".dialog").hide();
            	$(".mask").hide();
            })
            $("#button3").click(function(){//注册取消按钮点击事件
            	$(".dialog").hide();
            	$(".mask").hide();
            })
            $("#button2").click(function(){//注册确定按钮点击事件
            	$(".dialog").hide();
            	$(".mask").hide();
            	if($("input:checked").length!=0){
            		//如果选择了删除行
            		$(".divShow").remove();//删除某行数据
            	}
            })
		  })
		</script>
	</head>
	<body>
	  <div class="divShow">
	  	<input id="checkbox1" type="checkbox" />
	  	<a href="#">这是一条可删除的记录</a>
        <span>
        	<input id="button1" type="button" value="删除" class="btn"/>
        </span>
	  </div>
	  <div class="mask"></div>
	  <div class="dialog">
	  	<div class="title">
	  		<img src="img/IMG_20161117_160318.jpg.JPG" alt="点击可以关闭" />删除时提示
	  	</div>
	  	<div class="content">
	  		<img src="img/IMG_20161006_151540.jpg.JPG" alt="" />
	  		<span>您真的要删除该条记录吗？</span>
	  	</div>
	  	<div class="bottom">
	  		<input id="button2" type="button" value="确定" class="btn"/>  
	  		<input id="button3" type="button" value="取消" class="btn"/>
	  	</div>
	  </div>
	</body>
</html>

CSS

body{
	font-size: 13px;
}
.title img{
	width: 30px;
	height: px;
	float: right;
	margin-top: -1px;
}
.content img{
	width: 30px;
	height: 30px;
	float: left;
}

.divShow{
	line-height: 32px;
	height: 32px;
	background-color: #eee;
    width: 280px;
    padding-left: 10px;
}
.divShow span{
	margin-left: 30px;
}
.divShow a{
	text-decoration: none;
}
.dialog{
	width: 360px;
	border: solid 5px #666;
	position: absolute;
	display: none;
	z-index: 101;
}
.dialog .title{
	background-color: #fbaf15;
	padding: 10px;
	color: #fff;
	font-weight: bold;
}
.dialog .content{
	background-color: #fff;
	padding: 25px;
	height: 60px;
}
.dialog .content span{
	float: left;
	padding-top: 10px;
	padding-left: 10px;
}
.dialog .bottom{
	text-align: right;
	padding: 10px 10px 10px 0;
	background-color: #eee;
}
.mask{
	width: 100%;
	height: 100%;
	/*background-color: grey;*/
	position: absolute;
	top: 0;
	left: 0;
	/*filter: Alpha(Opacity="30");*/
	background-color: rgba(128,123,123,0.5);
	display: none;
	z-index: 100;
}
.btn{
	border: #666 1px solid;
	padding: 2px;
	width: 65px;
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ece9d8);
}

界面效果：

重点代码分析：

（1）在要求删除提示框一直居中显示，不论页面带小发生如何变化时，要根据窗口的长与宽和滚动条的Top和Left值及对话框自身的长与宽，计算出使提示对话框始终居中的left和top变量值，通过这个变量值来设置对话框的位置

function showDialog(){
            	var objW=$(window);//当前窗口
            	var objC=$(".dialog");//对话框
            	var brsW=objW.width();
            	var brsH=objW.height();
            	var sclL=objW.scrollLeft();//scrollTop指的是“元素中的内容”超出“元素上边界”的那部分的高度
            	var sclT=objW.scrollTop();
            	var curW=objC.width();
            	var curH=objC.height();
            	//计算对话框居中时的左边距
            	var left=sclL+(brsW-curW)/2;
            	//计算对话框居中时的上边距
            	var top=sclT+(brsH-curH)/2;
            	//设置对话框在页面中的位置
            	objC.css({"left":left,"top":top});
            }

接下来说明如何计算：