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 第二代身份证号码的验证机制代码
May 12 Javascript
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
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
Yii遍历行下每列数据的方法
2016/10/17 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
hammer.js实现图片手势放大效果
2017/08/29 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
Python素数检测的方法
2015/05/11 Python
python3 shelve模块的详解
2017/07/08 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
Python之字典添加元素的几种方法
2020/09/30 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
中科创达面试题
2016/12/28 面试题
优秀经理事迹材料
2014/02/01 职场文书
债务纠纷委托书
2014/08/30 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
秋菊打官司观后感
2015/06/03 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书