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 相关文章推荐
jQuery阻止同类型事件小结
Apr 19 Javascript
jQuery获取单击节点对象的方法
Jun 02 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
vue实现手机端省市区区域选择
Sep 27 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
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
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
js中eval详解
2012/03/30 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
jquery实现左右滑动菜单效果代码
2015/08/27 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
echarts学习笔记之箱线图的分析与绘制详解
2017/11/22 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
node.js中express模块创建服务器和http模块客户端发请求
2019/03/06 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
python使用post提交数据到远程url的方法
2015/04/29 Python
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
python 表格打印代码实例解析
2019/10/12 Python
pygame实现非图片按钮效果
2019/10/29 Python
Python urllib2运行过程原理解析
2020/06/04 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
do you have any Best Practice for testing
2016/06/04 面试题
毕业生求职简历的自我评价
2013/10/07 职场文书
管道维修工岗位职责
2013/12/27 职场文书
毕业证丢失证明
2014/01/15 职场文书
高考标语大全
2014/06/05 职场文书
班级团队活动方案
2014/08/14 职场文书
筑梦中国心得体会
2016/01/18 职场文书