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对URL字符串进行编码/解码分析
Oct 25 Javascript
JavaScript 未结束的字符串常量常见解决方法
Jan 24 Javascript
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
Aug 23 Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 Javascript
selenium+java中用js来完成日期的修改
Oct 31 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 Javascript
js实现限定范围拖拽的示例
Oct 26 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
ThinkPHP的L方法使用简介
2014/06/18 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
jQuery each()方法的使用方法
2010/03/18 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
js创建对象的方式总结
2015/01/10 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
react写一个select组件的实现代码
2019/04/03 Javascript
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
Python 调用Java实例详解
2017/06/02 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
mac使用python识别图形验证码功能
2020/01/10 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
用python实现一个简单的验证码
2020/12/09 Python
python re.match()用法相关示例
2021/01/27 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
公积金转移接收函
2014/01/11 职场文书
法定代表人资格证明书
2014/09/11 职场文书
工作年限证明模板
2014/11/01 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
《作风建设永远在路上》心得体会
2016/01/21 职场文书
Python中基础数据类型 set集合知识点总结
2021/08/02 Python
python读取mnist数据集方法案例详解
2021/09/04 Python