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();//删除某条数据
}
});
});
需要说明的是主要代买就是showDialog()的用于动态的确定对话框的显示位置。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。