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 相关文章推荐
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 Javascript
浅谈angular4实际项目搭建总结
Dec 01 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 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实现链结人气统计
2006/10/09 PHP
php异常处理技术,顶级异常处理器
2012/06/13 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
php生成随机颜色的方法
2014/11/13 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
document.open() 与 document.write()的区别
2007/08/13 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
JavaScript门道之标准库
2018/05/26 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
vue动态子组件的两种实现方式
2019/09/01 Javascript
Python中的魔法方法深入理解
2014/07/09 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
大学旷课检讨书
2014/01/28 职场文书
保护环境的建议书
2014/03/12 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
关于JavaScript回调函数的深入理解
2021/06/27 Javascript