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监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
jQuery ui 1.7更新小结
Aug 15 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 Javascript
js以及jquery实现手风琴效果
Apr 17 Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
微信小程序实现获取小程序码和二维码java接口开发
Mar 29 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
Vue实现图片轮播组件思路及实例解析
May 11 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
phpwind中的数据库操作类
2007/01/02 PHP
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
php查看当前Session的ID实例
2015/03/16 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
js防止页面被iframe调用的方法
2014/10/30 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
Vue中qs插件的使用详解
2020/02/07 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
Python的lambda匿名函数的简单介绍
2013/04/25 Python
详解python分布式进程
2018/10/08 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
在购买印度民族服饰:Soch
2020/09/15 全球购物
师范毕业生自我鉴定
2014/01/15 职场文书
大学共青团员个人自我评价
2014/04/16 职场文书
《三亚落日》教学反思
2014/04/26 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
还款承诺书范本
2015/01/20 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
python实现自定义日志的具体方法
2021/05/28 Python
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL