HTML代码:

<input type="button" class="delete_btn" value="删 除" />
<div class="shade"></div>
<div class="warning">
  <div class="warn_titel">警 告</div>
  <div class="warn_context">
    您确定要删除吗?删除后,将不可恢复,请慎重!!!
  </div>
  <div class="warn_btn">
    <div class="warn_btn_t">确 定</div>
    <div class="warn_btn_f">取 消</div>
  </div>
</div>

CSS:

/*删除按钮*/
.delete_btn {
position: absolute;
width: 100px;
height: 30px;
cursor: pointer;
}
/*半透明遮罩*/
.shade {
position: fixed;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.4;
z-index: 2;
display: none;
}
/*警告框*/
.warning {
position: fixed;
width: 400px;
top: 150px;
margin: auto;
background-color: white;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -135px;
z-index: 3;
display: none;
}
/*警告框标题*/
.warn_titel {
position: relative;
width: 100%;
height: 60px;
color: red;
font-size: 28px;
line-height: 60px;
text-align: center;
}
/*警告框内容*/
.warn_context {
position: relative;
width: 70%;
left: 15%;
min-height: 100px;
font-size: 18px;
text-indent: 30px;
}
/*警告框按钮*/
.warn_btn {
position: relative;
width: 100%;
height: 50px;
}
/*警告框确定按钮*/
.warn_btn_t {
position: absolute;
width: 25%;
left: 15%;
height: 30px;
background-color: #79cdcd;
color: white;
cursor: pointer;
text-align: center;
line-height: 30px;
}
/*警告框取消按钮*/
.warn_btn_f {
position: absolute;
width: 25%;
right: 15%;
height: 30px;
background-color: #808080;
color: white;
cursor: pointer;
text-align: center;
line-height: 30px;
}

JS:

//按钮动画颜色
$(".warn_btn_t").hover(function () {
$(this).stop().animate({ "background-color": "red" }, 500);
}, function () {
$(this).stop().animate({ "background-color": "#79cdcd" }, 500);
});

$(".warn_btn_f").hover(function () {
$(this).stop().animate({ "background-color": "red" }, 500);
}, function () {
$(this).stop().animate({ "background-color": "#808080" }, 500);
});

//删除按钮弹出提示框
$(".delete_btn").click(function () {
$(".shade").fadeIn(200);
$(".warning").fadeIn(400);
});

//警告确定按钮
$(".warn_btn_t").click(function () {
$(".warning").fadeOut(200);
$(".shade").fadeOut(400);
//删除按钮功能
});
//警告取消按钮
$(".warn_btn_f").click(function () {
$(".warning").fadeOut(200);
$(".shade").fadeOut(400);
//不删除功能
});

效果展示:

JQuery 操作按钮遮罩(删除)的更多相关文章

  1. 简单的用jQuery做遮罩效果

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  2. 使用jQuery增加或删除元素(内容)

    使用jQuery增加或删除元素(内容):一.jQuery添加元素或内容:1,append() 方法:在被选元素的结尾插入元素或内容 2,prepend() 方法:被选元素的开头插入元素或内容. 3,a ...

  3. jQuery实现遮罩层

    1.1 背景半透明遮罩层样式 需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式: /* 半透明的遮罩层 */ #overlay { background: #000 ...

  4. jQuery动态添加删除与添加表行代码

    具体实现代码如下: table的HTML如下: 代码如下 复制代码 <input type="button" value="添加一行" />< ...

  5. 基于jQuery图片遮罩滑动文字切换特效

    基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  6. 利用jQuery实现回收站删除效果

    jQuery是一款非常强大的Javascript脚本库,我们开发者喜欢jQuery的原因除了它代码简洁外,更多的是因为jQuery插件非常丰富.今天我们用一个示例来解说jQuery是如何实现拖拽的. ...

  7. jquery 添加与删除的规律 当要添加时候要定位到自己的父元素 当要删除时候 通过事件函数传入的this找到自己的父元素进行删除

    jquery 添加与删除的规律 当要添加时候要定位到自己的父元素  当要删除时候 通过事件函数传入的this找到自己的父元素进行删除

  8. jQuery动态添加删除CSS样式

    jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...

  9. 基于jQuery表格增加删除代码示例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 2015GitWebRTC编译实录17-audio_processing_neon编译问题解决

    编译audio_processing_neon lib时,发现只要涉及到WEBRTC_ARCH_ARM64就会出现问题,仔细回想了下,年初编译旧版本解决arm64支持问题时,好像也是要把这个注掉,但是 ...

  2. Directory的GetFiles方法

    想实现一个功能 :比如多个业务审批流程公用一个审批表的时候,有一个提示审批信息的页面 ,点击该页面不同的业务审批流程记录的时候,跳转到不同业务流程的详细显示界面 额 这样说 貌似以后我自己也看不明白 ...

  3. HTTP协议详解--转载http://blog.csdn.net/gueter/article/details/1524447

    引言 HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展.目前在WWW中使用的是HTTP/1. ...

  4. unresolved refrence 'execfile'……

    unresolved refrence 'execfile'-- 字面意思是execfile这个东东没有被解析 难道是没有import相应的lib? python docs 3.x: Removes ...

  5. RobotFramwork + Appium+ Andriod 环境搭建

    RF+Appium+Android环境搭建教程 - 1.RF安装 一.适用操作系统 Win7 旗舰版Sp1 32位操作系统 RF环境搭建,请参考文档<RobotFramwork安装指南> ...

  6. myeclipse启动tomcat报错cannot find a free socket for debugger

    解决办法,命令行输入netsh winsock reset,winsock是Windows网络编程接口,winsock工作在应用层,它提供与底层传输协议无关的高层数据传输编程接口 netsh wins ...

  7. LeetCode "Valid Perfect Square"

    Typical binary search.. but take care of data overflow if you are using C++ class Solution { public: ...

  8. IOCP简单实现

    本人工作是服务端性能测试,因工作需要开发机器人框架,选用底层的时候看到网上满大街的IOCP介绍,还有说IOCP比WSAAsyncSelect复杂等等,所以只好转WSAAsyncSelect实现. 因并 ...

  9. VC运行库合集2005/2008/2010/2012/2013/2015

    VC运行库合集2005/2008/2010/2012/2013/2015,批处理一键安装(需管理员权限) 链接:http://pan.baidu.com/s/1bpLZoFt 密码:bnk8

  10. VS2012打开解决方案崩溃或点击项目崩溃

    打开项目文件就VS2012就崩溃 解决方案: 步骤1:开始-->所有程序-->Microsoft Visual Studio 2012-->Visual Studio Tools-- ...