js简单实现删除记录时的提示效果


Posted in Javascript onDecember 05, 2013

样式

<style type="text/css"> 
body{font-size:13px} 
.divShow{line-height:32px;height:32px;background-color:#eee;width:280px;padding-left:10px} 
.divShow span{padding-left:50px} 
.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 .title img{float:right} 
.dialog .content{background-color:#fff;padding:25px;height:60px} 
.dialog .content img{float:left} 
.dialog .content span{float:left;padding-top:10px;padding-left:10px} 
.dialog .bottom{text-align:right;padding:10px 10px 10px 0px;background-color:#eee} 
.mask {width:100%;height:100%; background-color:#000;position:absolute; 
top:0px;left:0px;filter:alpha(opacity=30);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);} </style>

jquery
<script type="text/javascript"> 
$(function() { 
$("#Button1").click(function() { //注册删除按钮点击事件 
$(".mask").show(); //显示背景色 
showDialog(); //设置提示对话框的Top与Left 
$(".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(); //设置提示对话框的Top与Left 
}); 

$(".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>

html
<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="Images/close.gif" alt="点击可以关闭" />删除时提示 
</div> 
<div class="content"> 
<img src="Images/delete.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>
Javascript 相关文章推荐
一个符号插入器 中用到的js代码
Sep 04 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
jquery的index方法实现tab效果
Feb 16 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
JS实现带动画的回到顶部效果
Dec 28 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
token 机制和实现方式
Dec 15 Javascript
Jquery 切换不同图片示例代码
Dec 05 #Javascript
jquery 快速回到页首的方法
Dec 05 #Javascript
JS验证邮箱格式是否正确的代码
Dec 05 #Javascript
javascript eval(func())使用示例
Dec 05 #Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 #Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 #Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 #Javascript
You might like
php抽象类使用要点与注意事项分析
2015/02/09 PHP
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
Python入门篇之文件
2014/10/20 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
基于PyTorch中view的用法说明
2021/03/03 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
购房意向书范本
2014/04/01 职场文书
英语专业求职信
2014/07/08 职场文书
文明社区申报材料
2014/08/21 职场文书
2014年法务工作总结
2014/12/11 职场文书
就业意向书范本
2015/05/11 职场文书
法院答辩状格式
2015/05/22 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
详解Redis复制原理
2021/06/04 Redis
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers