当前位置:  编程技术>WEB前端

jquery删除数据记录时的弹出提示效果

    来源: 互联网  发布时间:2014-08-25

    本文导语:  提示效果如图:(删除提示框一直居中显示)   代码如下: 删除记录时的提示效果 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:...

提示效果如图:(删除提示框一直居中显示)
 
代码如下:




删除记录时的提示效果

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);}




$(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(); //删除某行数据
}
});
});







点击可以关闭删除时提示



您真的要删除该记录吗?


  






    
 
 

您可能感兴趣的文章:

  • jquery删除提示框(弹出是否删除对话框)
  • jquery删除提示框弹出是否删除对话框
  • jQuery操作select option选项(增加 删除 修改)
  • Jquery删除元素的代码举例
  • jQuery 获取/设置/删除DOM元素的属性以a元素为例
  • JQuery动态删除Table表格的行与列
  • jquery 删除字符串最后一个字符的方法解析
  • JQuery 删除节点的例子
  • jquery 删除select中option选项
  • jquery删除指定的html标签并保留标签内文本内容的方法
  • jquery代码-如何显示或删除input域中的默认值
  • jquery css类用法(添加、修改与删除css)
  • jQuery动态添加、删除元素的方法
  • jquery删除节点代码
  • jquery实现Select option项的添加、删除、取值
  • jquery判断小数点两位和自动删除小数两位后的数字
  • jquery动态添加删除一行数据实例
  • jQuery删除节点的三个方法即remove()detach()和empty()
  • jQuery 删除/替换DOM元素的几种方式
  • 如何从jQuery的ajax请求中删除X-Requested-With
  • jQuery 气泡提示框 jquery.contip.js
  • jQuery的气泡提示插件 jquery.ns_bub.js
  • jQuery气泡提示插件 jquery-rollover-tooltip
  • jQuery工具提示插件 Tooltip
  • jQuery工具提示插件 qTip
  • jQuery 工具提示插件 PowerTip
  • jQuery信息提示插件 Dynamic tooltip
  • jQuery-ui引入后Vs2008的无智能提示问题解决方法
  • jQuery 工具提示插件 Colortip
  • jQuery工具提示插件 BeautyTips
  • jQuery工具提示插件 Simpletip
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery滚动效果插件 jQuery.SerialScroll
  • jQuery照明效果插件 jQuery Photon
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jQuery盖章效果插件 jquery.stamper
  • jQuery卷页效果 jQuery Page Peel
  • 链接渐变效果 jQuery glow
  • jQuery的效果集工具包 Glimmer
  • jQuery Lightbox效果插件 Boxer
  • jQuery滚动延迟效果插件 AnimateScroll
  • jQuery电梯式滚动效果插件 Ascensor
  • jQuery 页面动画效果 Animsition
  • jQuery 幻灯片效果插件 plusview
  • jQuery图片效果切换 Adipoli
  • jQuery 幻灯效果显示插件 Diapo
  • jQuery文本效果插件 Textualizer
  • jQuery在iPhone/iPad的滚动效果处理 Overscroll
  • jQuery轮盘效果插件 Roundabout
  • jQuery淡入淡出效果 InnerFade
  • jQuery图片缩放效果 FancyZoom
  • jQuery图片幻灯手风琴效果插件 Slidorion
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • jQuery图片效果切换 Adipoli iis7站长之家
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3