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 相关文章推荐
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
js实现微博发布小功能
Jan 12 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 Javascript
JS图片懒加载技术实现过程解析
Jul 27 Javascript
Vue 修改网站图标的方法
Dec 31 Vue.js
前端学习——JavaScript原生实现购物车案例
Mar 31 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
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
php数据类型判断函数有哪些
2013/09/23 PHP
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
Linux基于php-fpm模式的lamp搭建phpmyadmin的方法
2018/10/25 PHP
jQuery $.each的用法说明
2010/03/22 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
python matplotlib坐标轴设置的方法
2017/12/05 Python
python爬取微信公众号文章
2018/08/31 Python
给我一面国旗 python帮你实现
2019/09/30 Python
Python2与Python3的区别详解
2020/02/09 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
SQL里面IN比较快还是EXISTS比较快
2012/07/19 面试题
高中毕业生自我鉴定范文
2013/09/26 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
好的促销活动方案
2014/08/21 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
中学生检讨书1000字
2014/10/28 职场文书
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS