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 15 Javascript
event.srcElement 用法笔记e.target
Dec 18 Javascript
一个网马的tips实现分析
Nov 28 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
Feb 16 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 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同时支持GIF、png、JPEG
2006/10/09 PHP
zend framework多模块多布局配置
2011/02/26 PHP
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
布同 统计英文单词的个数的python代码
2011/03/13 Python
Python break语句详解
2014/03/11 Python
快速了解python leveldb
2018/01/18 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
python如何调用字典的key
2020/05/25 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
物业管理大学生个人的自我评价
2013/10/10 职场文书
高中生学习总结的自我评价范文
2013/10/13 职场文书
我的求职择业计划书
2014/04/04 职场文书
供货协议书范本
2014/04/22 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
中英文求职信范文
2015/03/19 职场文书
2015年远程教育工作总结
2015/05/20 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle