jQuery实现遮罩弹出对话框(仿天猫的删除对话框)

我们在天猫进行购物的时候,经常会碰到单击删除按钮或者登陆按钮后,弹出对话框问你是否删除或者弹出一个登陆对话框,并且我们也是可以看到我们之前页面的信息,就是点击不了,只有对对话框进行操作后才有相应的变化。截图如下(以天猫为例)



如图所示,上面就是天猫的效果图,其实这就是通过jQuery实现的,并且实现的过程也不是很不复杂,那么现在就让我们来看看实现的过程吧。

首先是页面的布局部分:delete.html

<!DOCTYPE html>
<html>
<head>
<title>遮罩弹出窗口</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css" href="../css/delete.css">
    <script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="../js/delete.js"></script>

</head>

<body>
	<div class="divShow">
		<input type="checkbox" id="chexkBox1"> <a href="#">这是一条可以删除的记录</a>
		 <input id="button1" type="button" value="删除" class="btn">
		 

	</div>
	

	<div class="mask"></div>
	<div class="dialog">
		<div class="title">
			<img alt="点击可以关闭" src="../images/delete.gif" width="30px" height="30px;">
			删除时提示
		</div>
		<div class="content">
			<img alt="" src="../images/delete.gif" width="60px" height="60px">
			<span>你真的要删除这条记录吗?</span>
		
		</div>
		<div class="bottom">
			<input type="button" id="ok" value="确定" class="btn">
			<input type="button" id="noOk" value="取消" class="btn">
		
		</div>
	</div>

</body>
</html>
需要做出说明的是,我只添加了一条记录,其实可以模拟多条记录的删除。这里我们有三层div结构,其中mask和dialog使我们通过jquery进行触发的,接下来我们讲下css的布局,先上代码:delete.html

@CHARSET "UTF-8";
*{
	margin: 0px;
	padding: 0px;
	
}
.divShow{
	line-height: 32px;
	height: 32px;
	background-color: #eee;
	width: 280px;
	padding-left: 10px;
}



.dialog{
	width: 360px;
	border: 1px #666 solid;
	position: absolute;
	display: none;
	z-index: 101;//保证该层在最上面显示
}

.dialog .title{
	background:#fbaf15;
	padding: 10px;
	color: #fff;
	font-weight: bold;
	
}

.dialog .title img{
	float:right;
}

.dialog .content{
	
	background: #fff;
	padding: 25px;
	height: 60px;
}

.dialog .content img{
	float: left;
}
.dialog .content span{
	float: left;
	padding: 10px;
	
}


.dialog .bottom{
	
	text-align: right;
	padding: 10 10 10 0;
	background: #eee;
}

.mask{
	
	width: 100%;
	height: 100%;
	background: #000;
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
	z-index: 100;
	
}
.btn{
	
	border: #666 1px solid;
	width: 65px;

}
在CSS文件中,我需要着重说明的是z-index的使用,z-index表示的层的堆叠顺序,如果数值越高,表示越在上层显示,mask的z-index是100,dialog的z-index是101,数值足够大的原因就是保证绝对在顶层显示,通过数值的调增可以控制div层的显示。

接下来就是最为主要的js代码,当然在使用jquery时,我们要导入jquery包:<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>

delete.js

$(function(){
	
	//绑定删除按钮的触发事件
	$("#button1").click(function(){
		
		$(".mask").css("opacity","0.3").show();
		showDialog();
		$(".dialog").show();
	});
	
	/*
	 * 根据当前页面于滚动条的位置,设置提示对话框的TOP和left
	 */
	function  showDialog(){
		var objw=$(window);//当前窗口
		var objc=$(".dialog");//当前对话框
		var brsw=objw.width();
		var brsh=objw.height();
		var sclL=objw.scrollLeft();
		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();
		
	});
	//取消按钮事件
	$("#noOk").click(function(){
		$(".dialog").hide();
		$(".mask").hide();
	});
	
	//确定按钮事假
	$("#ok").click(function(){
		
		$(".dialog").hide();
		$(".mask").hide();
	
		if($("input:checked").length !=0){
			//注意过滤器选择器中间不能存在空格$("input :checked")这样是错误的
			
			$(".divShow").remove();//删除某条数据
		}
		
	});
	
	
});																		

需要说明的是主要代买就是showDialog()的用于动态的确定对话框的显示位置。

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值