删除记录时的提示效果,挺人性化的,实现的方法有很多,在本文为大家介绍下使用js是如何实现的
样式

复制代码代码如下:
<style type="text/css"> 
body{font-size:13px} 
.divShow{line-height:32px;height:32px;background-color:#eee;width:280px;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);display:none;z-index:100} 
.btn {border:#666 1px solid;padding:2px;width:65px; 
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}

</style>

jquery

复制代码代码如下:
<script type="text/javascript"> 
$(function() { 
$("#Button1").click(function() { //注册删除按钮点击事件 
$(".mask").show(); //显示背景色 
showDialog(); //设置提示对话框的Top与Left 
$(".dialog").show(); //显示提示对话框 
}) 
/* 
*根据当前页面与滚动条位置,设置提示对话框的Top与Left 
*/ www.jbxue.com
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 curW = objC.width(); 
var curH = objC.height(); 
//计算对话框居中时的左边距 
var left = sclL + (brsW - curW) / 2; 
//计算对话框居中时的上边距 
var top = sclT + (brsH - curH) / 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> 

html

复制代码代码如下:
<div class="divShow"> 
<input id="Checkbox1" type="checkbox" /> 
<a href="#">这是一条可删除的记录 www.jbxue.com</a> 
<span> 
<input id="Button1" type="button" value="删除" class="btn" /> 
</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 id="Button2" type="button" value="确定" class="btn"/>   
<input id="Button3" type="button" value="取消" class="btn"/> 
</div> 
</div> 

js简单实现删除记录时的提示效果的更多相关文章

  1. 【转】Windows10删除文件时却提示文件不存在的解决方案

    Windows10系统使用一段时间后用户都会定期进行删除清理系统垃圾,减少系统盘的容量占用,但在删除的过程中许多用户都有可能遇到无法删除的情况,如下为删除文件时却提示文件不存在的解决方案. 1.新建一 ...

  2. js简单 图片版时钟,带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  3. jquery删除记录弹出提示框

    来自于<jquery权威指南> ------------------- 点击删除时,弹出提示框,并做相应的删除确定或取消 完整代码如下: <!DOCTYPE html PUBLIC ...

  4. win7电脑删除文件时一直提示文件正在被另一个程序占用

    这样的情况并非是第一次遇到了,以前总是会觉得这样的问题只是电脑的错乱,重启一下电脑就好了,但是并非每次都需要重启电脑的,其实简单的设置一下,这个问题就可以解决了.对了,咱们还是说说这到底是个什么问题吧 ...

  5. 使用spin.js优化等待ajax返回时的页面效果

    [本文出自天外归云的博客园] 最近在做一个JIRA信息统计的系统,在统计JIRA关联信息的过程中由于需要等待ajax返回结果到前端,时间较长,所以要添加一段等待时的loading画面,使用spin.j ...

  6. js借助JSONP实现百度搜索框提示效果

    主要借助百度搜索的API,调用时会存在跨域问题,需要通过JSONP来解决这个问题,代码如下(代码中部分使用ES6语法): HTML <input type="text" id ...

  7. EF:插入记录失败,提示当 IDENTITY_INSERT 设置为 OFF 时,不能向表中的标识列插入显式值

    EF忽然报错:增加记录时,提示当 IDENTITY_INSERT 设置为 OFF 时,不能向表 '...' 中的标识列插入显式值.真奇怪,添加记录方法一向好地地,从没出过错.要出错,那也是Update ...

  8. U盘删除文件时提示“文件或目录损坏且无法读取”的解决方法

    U盘删除文件时提示“文件或目录损坏且无法读取”的解决方法 出现原因:在写入或读取文件时,进行复制操作,此时复制到的文件是不完整的!或者移动硬盘/U盘中途被拔出,导致文件损坏 异常现象:被删文件(夹)属 ...

  9. 删除数据库时提示数据库正在被使用,无法删除(Cannot drop database databasename because it is currently in use)的问题

    删除数据库时提示数据库正在被使用,无法删除(Cannot drop database databasename because it is currently in use)的问题   删除数据库时提 ...

随机推荐

  1. Java 中extends与implements使用方法

    Java 中extends与implements使用方法 标签: javaclassinterfacestring语言c 2011-04-14 14:57 33314人阅读 评论(7) 收藏 举报 分 ...

  2. Spring+MyBatis多数据源配置实现

    最近用到了MyBatis配置多数据源,原以为简单配置下就行了,实际操作后发现还是要费些事的,这里记录下,以作备忘 不多废话,直接上代码,后面会有简单的实现介绍 jdbc和log4j的配置 #定义输出格 ...

  3. UIImageView的图片居中问题

    原文链接地址:http://www.ganlvji.com/?p=139 原文链接地址:http://blog.csdn.net/zhoutao198712/article/details/87620 ...

  4. Notes of the scrum meeting(11/3)

    meeting time:19:30~20:00p.m.,November 3th,2013 meeting place:20号公寓楼前 attendees: 顾育豪                  ...

  5. 《JavaScript高级程序设计》心得笔记-----第五篇章

    第二十二章 1.  安全的检测是使用:Object.prototype.toString.call(value); eg: function isArray(value){ return Object ...

  6. post请求和get请求的区别

    1:如果表单是以post方式发送,那么表单中的数据会放在请求报文体中,发送到服务端.但是如果是以get方式提交表单,那么表单中用户输入的数据都是以URL地址的方式发送到服务端. 2:在服务端接收数据时 ...

  7. 利用border和伪类画出三角形 ps:好久没写博客了。。。

    有一个半月没有写博客了,这段时间,小哥我经历了自入行前端最为黑暗的时期,迷茫,空虚,不想写代码,不想做研究了.连打游戏都没有兴趣,如同行尸走肉一般.还好,毕业论文的初稿完成后,整个时间段最恶心最难熬的 ...

  8. Android自定义View和控件之一-定制属于自己的UI

    照例,拿来主义.我的学习是基于下面的三篇blog.前两是基本的流程,第三篇里有比较细致的绘制相关的属性.第4篇介绍了如何减少布局层次来提高效率. 1. 教你搞定Android自定义View 2. 教你 ...

  9. Codeforces Round #438 B. Race Against Time

    Description Have you ever tried to explain to the coordinator, why it is eight hours to the contest ...

  10. sission的使用

    链接:https://pan.baidu.com/s/10B2V9g9OLmOY-9dKVoA15Q 提取码:fy7c 通过sission实现记录人数截图如下: