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 相关文章推荐
jQuery 名称冲突的解决方法
Apr 08 Javascript
固定表格行列(expression)在IE下适用
Jul 25 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
如何为你的JS项目添加智能提示与类型检查详解
Mar 12 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 cli 方式 在crotab中运行解决
2010/02/08 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
详细解析Python中的变量的数据类型
2015/05/13 Python
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
Python接口测试文件上传实例解析
2020/05/22 Python
加拿大时装零售商:Influence U
2018/12/22 全球购物
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
八一建军节活动方案
2014/02/10 职场文书
在校大学生个人的自我评价
2014/02/13 职场文书
法律专业求职信
2014/05/24 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
医者仁心观后感
2015/06/17 职场文书
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript