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 相关文章推荐
Function.prototype.bind用法示例
Sep 16 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
如何在Linux上安装Node.js
Apr 01 Javascript
详解Bootstrap插件
Apr 25 Javascript
常用的js方法合集
Mar 10 Javascript
vue设置动态请求地址的例子
Nov 01 Javascript
Vue修改项目启动端口号方法
Nov 07 Javascript
JS数组的高级使用方法示例小结
Mar 14 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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
Php+SqlServer实现分页显示
2006/10/09 PHP
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
python随机取list中的元素方法
2018/04/08 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
Python3中列表list合并的四种方法
2019/04/19 Python
python输出带颜色字体实例方法
2019/09/01 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
python定时截屏实现
2020/11/02 Python
印尼网上商店:Alfacart.com
2019/03/11 全球购物
教师绩效工资方案
2014/02/01 职场文书
出纳会计岗位职责
2014/03/12 职场文书
有创意的广告词
2014/03/18 职场文书
警校毕业生自我评价
2014/04/06 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
个人剖析材料范文
2014/09/30 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers