jquery删除数据记录时的弹出提示效果


Posted in Javascript onMay 06, 2014

提示效果如图:(删除提示框一直居中显示)
jquery删除数据记录时的弹出提示效果 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>删除记录时的提示效果</title> 
<style type="text/css"> 
body{ font-size:13px;} 
.divShow{ line-height:32px; height:32px; width:280px; background-color:#eee; 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); z-index:100; display:none;} 
.btn{ border:solid 1px #666; padding:2px; width:65px; filter:progid.DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, 
EndColorStr=#ECE9D8);} 
</style> 
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<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 cruW = objC.width(); 
var cruH = objC.height(); 
var left = sclL + (brsW - cruW) / 2; //计算对话框居中时的左边距 
var top = sclT + (brsH - cruH) / 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> 
</head> 
<body> 
<div class="divShow"> 
<input type="checkbox" id="Checkbox" /> 
<a href="#">这是一条可以删除的记录</a> 
<span> 
<input type="button" id="Button1" class="btn" value="删除"/> 
<input type="button" value="对比" /> 
</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 type="button" id="Button2" value="确定" class="btn" />   
<input type="button" id="Button3" value="取消" class="btn" /> 
</div> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
js计算页面刷新的次数
Jul 20 Javascript
jqgrid 简单学习笔记
May 03 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
Jquery实现三层遍历删除功能代码
Apr 23 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
vue引入swiper插件的使用实例
Jul 19 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
vue动态配置模板 'component is'代码
Jul 04 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
js单词形式的运算符
May 06 #Javascript
js函数调用的方式
May 06 #Javascript
js使用ajax读博客rss示例
May 06 #Javascript
Android中的jQuery:AQuery简介
May 06 #Javascript
JavaScript获取table中某一列的值的方法
May 06 #Javascript
jQuery判断元素是否存在的可靠方法
May 06 #Javascript
js图片自动轮播代码分享(js图片轮播)
May 06 #Javascript
You might like
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
js正则相关知识点专题
2018/05/10 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
python生成随机密码或随机字符串的方法
2015/07/03 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
通过Python实现一个简单的html页面
2020/05/16 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
css 元素选择器的简单实例
2016/05/23 HTML / CSS
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
期末总结的个人自我评价
2013/11/02 职场文书
母亲80寿诞答谢词
2014/01/16 职场文书
计算机学生求职信范文
2014/01/30 职场文书
班组安全员工作职责
2014/02/01 职场文书
检查接待方案
2014/02/27 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
质量保证书格式
2015/02/27 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
联谊活动总结范文
2015/05/09 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
Python序列化模块JSON与Pickle
2022/06/05 Python