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 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
JS获取当前日期和时间的简单实例
Nov 19 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
May 28 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 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利用COM对象访问SQLServer、Access
2006/10/09 PHP
php GD绘制24小时柱状图
2008/06/28 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
Javascript中的默认参数详解
2014/10/22 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
python re.match()用法相关示例
2021/01/27 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
责任胜于能力演讲稿
2014/05/20 职场文书
护理学专业求职信
2014/06/29 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
Javascript 解构赋值详情
2021/11/17 Javascript