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 相关文章推荐
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
jquery $.each()使用探讨
Sep 23 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
angular directive的简单使用总结
May 24 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 Javascript
JavaScript实现复选框全选功能
Apr 11 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 smarty函数扩展
2010/03/15 PHP
php调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
javascript 获取表单file全路径
2009/12/31 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
2017/10/25 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
对python 命令的-u参数详解
2018/12/03 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
python如何输出反斜杠
2020/06/18 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
结构和类有什么异同
2012/07/16 面试题
英语生日邀请函
2014/01/23 职场文书
迎新生标语大全
2014/10/06 职场文书
催款通知书范文
2015/04/17 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server