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中“+=”的应用
Feb 02 Javascript
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
js获取url参数的使用扩展实例
Dec 29 Javascript
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
学习ExtJS(二) Button常用方法
Oct 07 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
面试中canvas绘制图片模糊图片问题处理
Mar 13 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
缅甸的咖啡简史
2021/03/04 咖啡文化
简单的PHP图片上传程序
2008/03/27 PHP
PHP 读取和编写 XML
2014/11/19 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
JavaScript Accessor实现说明
2010/12/06 Javascript
Javascript学习笔记二 之 变量
2010/12/15 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
django之使用celery-把耗时程序放到celery里面执行的方法
2019/07/12 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
物业经理求职自我评价
2013/09/22 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
项目申请汇报材料
2014/08/16 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
烈士陵园观后感
2015/06/08 职场文书
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS
nginx配置指令之server_name的具体使用
2022/08/14 Servers