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


Posted in Javascript onApril 10, 2014

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

});<span style="white-space:pre">

需要说明的是主要代买就是showDialog()的用于动态的确定对话框的显示位置。
Javascript 相关文章推荐
javascript中的变量是传值还是传址的?
Apr 19 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
如何动态加载外部Javascript文件
Dec 02 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
jQuery中实现text()的方法
Apr 04 jQuery
Vue表单之v-model绑定下拉列表功能
May 14 Javascript
vue使用map代替Aarry数组循环遍历的方法
Apr 30 Javascript
微信小程序实现打卡签到页面
Sep 21 Javascript
jquery获取复选框被选中的值
Apr 10 #Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 #Javascript
用js设置下拉框为只读的小技巧
Apr 10 #Javascript
js获取上传文件大小示例代码
Apr 10 #Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 #Javascript
js实现图片旋转的三种方法
Apr 10 #Javascript
javascript:void(0)的问题使用探讨
Apr 10 #Javascript
You might like
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
PHP开发负载均衡指南
2010/07/17 PHP
php curl_init函数用法
2014/01/31 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
php-msf源码详解
2017/12/25 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
2019/06/19 jQuery
vue实现日历备忘录功能
2020/09/24 Javascript
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
django session完成状态保持的方法
2018/11/27 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
HTML5标签大全
2016/11/23 HTML / CSS
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
教师岗位职责
2013/11/17 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
买卖合同协议书范本
2014/10/18 职场文书
圣诞晚会主持词
2015/07/01 职场文书
一篇文章带你复习java知识点
2021/06/28 Java/Android