读书笔记--删除数据时的提示效果在项目中的应用

需求分析：

（1）当用户单击删除按钮时，整个页面背景类似于关机效果，“删除”提示框突出显示，用户可以选“关闭”按钮，或者单击“确定”或“取消”操作。

（2）删除提示框一直居中显示，不论页面带小发生如何变化

（3）如果对某条记录打钩，当用户单击提示框中的“确定”按钮时，将在页面中删除该条记录，同时关闭提示框，页面背景恢复正常

功能实现：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link type="text/css" href="css/lianxi.css" rel="stylesheet"><script src="js/jquery-1.4.2.js" type="text/javascript"></script><script type="text/javascript">$(function(){$("#button1").click(function(){//注册删除按钮单击事件$(".mask").show();showDialog();//显示提示对话框的top与left$(".dialog").show();})
//          根据当前页面与滚动条位置,设置提示对话框的top与leftfunction showDialog(){var objW=$(window);//当前窗口var objC=$(".dialog");//对话框var brsW=objW.width();var brsH=objW.height();var sclL=objW.scrollLeft();//scrollTop指的是“元素中的内容”超出“元素上边界”的那部分的高度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();})$("#button3").click(function(){//注册取消按钮点击事件$(".dialog").hide();$(".mask").hide();})$("#button2").click(function(){//注册确定按钮点击事件$(".dialog").hide();$(".mask").hide();if($("input:checked").length!=0){//如果选择了删除行$(".divShow").remove();//删除某行数据}})})</script></head><body><div class="divShow"><input id="checkbox1" type="checkbox" /><a href="#">这是一条可删除的记录</a><span><input id="button1" type="button" value="删除" class="btn"/></span></div><div class="mask"></div><div class="dialog"><div class="title"><img src="img/IMG_20161117_160318.jpg.JPG" alt="点击可以关闭" />删除时提示</div><div class="content"><img src="img/IMG_20161006_151540.jpg.JPG" alt="" /><span>您真的要删除该条记录吗？</span></div><div class="bottom"><input id="button2" type="button" value="确定" class="btn"/>  <input id="button3" type="button" value="取消" class="btn"/></div></div></body>
</html>

CSS

body{font-size: 13px;
}
.title img{width: 30px;height: px;float: right;margin-top: -1px;
}
.content img{width: 30px;height: 30px;float: left;
}.divShow{line-height: 32px;height: 32px;background-color: #eee;width: 280px;padding-left: 10px;
}
.divShow span{margin-left: 30px;
}
.divShow a{text-decoration: none;
}
.dialog{width: 360px;border: solid 5px #666;position: absolute;display: none;z-index: 101;
}
.dialog .title{background-color: #fbaf15;padding: 10px;color: #fff;font-weight: bold;
}
.dialog .content{background-color: #fff;padding: 25px;height: 60px;
}
.dialog .content span{float: left;padding-top: 10px;padding-left: 10px;
}
.dialog .bottom{text-align: right;padding: 10px 10px 10px 0;background-color: #eee;
}
.mask{width: 100%;height: 100%;/*background-color: grey;*/position: absolute;top: 0;left: 0;/*filter: Alpha(Opacity="30");*/background-color: rgba(128,123,123,0.5);display: none;z-index: 100;
}
.btn{border: #666 1px solid;padding: 2px;width: 65px;filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ece9d8);
}

界面效果：

重点代码分析：

（1）在要求删除提示框一直居中显示，不论页面带小发生如何变化时，要根据窗口的长与宽和滚动条的Top和Left值及对话框自身的长与宽，计算出使提示对话框始终居中的left和top变量值，通过这个变量值来设置对话框的位置

function showDialog(){var objW=$(window);//当前窗口var objC=$(".dialog");//对话框var brsW=objW.width();var brsH=objW.height();var sclL=objW.scrollLeft();//scrollTop指的是“元素中的内容”超出“元素上边界”的那部分的高度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});}

接下来说明如何计算：

如果对话框的原点与页面的原点完全重合，即都在B点，对话框则居中，那么，对话框的坐标，实际上就是A点的位置，它的left值为页面的width值减掉对话框的width值后除以2，再加上滚动条的left值，即

var left=sclL+(brsW-curW)/2;

同理，top值为页面的height值减去对话框的height值后除以2，再加上滚动条的top值，即

var top=sclT+(brsH-curH)/2;

除了这种方法，也可以使用CSS使其垂直居中，这里就不赘述。

（2）关于背景色的透明度：

在本例中也可以用

background-color: grey;

filter: Alpha(Opacity="30");

但是要注意这个是在ie4.0+有效，否则不能起到透明度的作用。

摘自《jQuery权威指南》

读书笔记--删除数据时的提示效果在项目中的应用相关推荐

ajax返回的数据怎么显示出来_Excel输入汉字、拼音首字母就能显示数据出来，录数据时逐步提示...
在办公中经常需要录入数据,特别是财务,人力资源,采购这块,经常需要如果经常复制.粘贴很累,即使用到数据有效性进行设置,数据量多了,也不好选择. 所以,这里介绍两个Excel插件E灵和EXCEL必备工 ...
大数据之路读书笔记-03数据同步
大数据之路读书笔记-03数据同步如第一章所述,我们将数据采集分为日志采集和数据库数据同步两部分.数据同步技术更通用的含义是不同系统间的数据流转,有多种不同的应用场景.主数据库与备份数据库之间的数据备 ...
大数据之路读书笔记-15数据质量
大数据之路读书笔记-15数据质量随着 IT向DT 时代的转变,数据的重要性不言而喻,数据的应用也日趋繁茂,数据正扮演着一个极其重要的角色.而对于被日益重视的数据,如何保障其质量也是间里巴巴乃至业界都 ...
WPF，Silverlight与XAML读书笔记第三十九 - 可视化效果之3D图形
原文:WPF,Silverlight与XAML读书笔记第三十九 - 可视化效果之3D图形说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘> ...
大数据之路读书笔记-16数据应用
大数据之路读书笔记-16数据应用全球知名咨询公司麦肯锡称:"数据,已经透到当今每一个行业和业务职能领域,成为重要的生产要素.人们对于海量数据的挖掘和运用,预示着新一波生产率增长和消费者盈 ...
win7 iE8 删除临时文件时总提示Internet 控制面板已停止工作
问题描述: win7 iE8 删除临时文件时总提示Internet 控制面板已停止工作 >>>解决办法: 先是尝试重置浏览器高级设置,未果,后重装IE浏览器,问题照旧,最终是从详 ...
excel oledb mysql_通用Excel设置外部数据源引入Access数据库数据时，提示：“尚未注册 OLE DB 访问接口 Microsoft.Ace.Oledb.12.0”...
在通用Excel中开发各种ERP.CRM.OA.进销存.内控管理.项目管理.工程施工管理.客户关系管理.绩效考核管理.销售管理.采购管理.仓库管理.行政管理.财务管理.人事管理.生产管理.考勤管理等系 ...
java ps.executeupdate()不执行_求救！在删除数据时不执行executeUpdate();
你的位置: 问答吧 -> JAVA -> 问题详情求救!在删除数据时不执行executeUpdate(); @Override public boolean delete(UserMod ...
《数据挖掘导论》 - 读书笔记(3) - 数据 [2016-8-13]
第2章数据本章讨论一些与数据相关的问题,对于数据挖掘的成本至关重要. 数据类型数据集的不同表现在很多方面.例如,用来描述数据对象的属性可以具有不同的类型---定量的或定性的,并且数据集可能具有特 ...

读书笔记--删除数据时的提示效果在项目中的应用

读书笔记--删除数据时的提示效果在项目中的应用相关推荐

最新文章

热门文章