JQuery 操作按钮遮罩(删除)
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 操作按钮遮罩(删除)的更多相关文章
- 简单的用jQuery做遮罩效果
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- 使用jQuery增加或删除元素(内容)
使用jQuery增加或删除元素(内容):一.jQuery添加元素或内容:1,append() 方法:在被选元素的结尾插入元素或内容 2,prepend() 方法:被选元素的开头插入元素或内容. 3,a ...
- jQuery实现遮罩层
1.1 背景半透明遮罩层样式 需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式: /* 半透明的遮罩层 */ #overlay { background: #000 ...
- jQuery动态添加删除与添加表行代码
具体实现代码如下: table的HTML如下: 代码如下 复制代码 <input type="button" value="添加一行" />< ...
- 基于jQuery图片遮罩滑动文字切换特效
基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 利用jQuery实现回收站删除效果
jQuery是一款非常强大的Javascript脚本库,我们开发者喜欢jQuery的原因除了它代码简洁外,更多的是因为jQuery插件非常丰富.今天我们用一个示例来解说jQuery是如何实现拖拽的. ...
- jquery 添加与删除的规律 当要添加时候要定位到自己的父元素 当要删除时候 通过事件函数传入的this找到自己的父元素进行删除
jquery 添加与删除的规律 当要添加时候要定位到自己的父元素 当要删除时候 通过事件函数传入的this找到自己的父元素进行删除
- jQuery动态添加删除CSS样式
jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...
- 基于jQuery表格增加删除代码示例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 重写ScrollView 解决ScrollView嵌套viewpager事件冲突
import android.content.Context; import android.util.AttributeSet; import android.view.GestureDetecto ...
- 转:Task任务调度实现生产者消费者模式
我们经常会遇到生产者消费者模式,比如前端各种UI操作事件触发后台逻辑等.在这种典型的应用场景中,我们可能会有4个业务处理逻辑(下文以P代表生产者,C代表消费者): 1. FIFO(先进先出) ...
- ps磨皮
光滑磨皮步骤: 1.用高斯模糊滤镜模糊皮肤,用蒙版控制范围,去掉较为明显的杂色及瑕疵.可以高斯模糊重复多次,去掉明显的杂色. 2.用涂抹工具处理细小的瑕疵及加强五官等部位的轮廓: 3.整体美白及润色 ...
- JVM byte code
http://blog.jamesdbloom.com/JVMInternals.html#constant_pool http://grepcode.com/file/repository.grep ...
- 自动 点击切换 按钮切换 轮播无缝选项卡 ----原生js
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...
- 每天一个 Linux 命令(7):mv命令
mv命令是move的缩写,可以用来移动文件或者将文件改名(move (rename) files),是Linux系统下常用的命令,经常用来备份文件或者目录. 1.命令格式: mv [选项] 源文件或目 ...
- [ActionScript 3.0] AS3.0 对象在矩形范围随机运动
package com.views { import flash.display.Bitmap; import flash.display.MovieClip; import flash.displa ...
- 图的存储,搜索,遍历,广度优先算法和深度优先算法,最小生成树-Java实现
1)用邻接矩阵方式进行图的存储.如果一个图有n个节点,则可以用n*n的二维数组来存储图中的各个节点关系. 对上面图中各个节点分别编号,ABCDEF分别设置为012345.那么AB AC AD 关系可以 ...
- LINUX下WIFI默认连接
#! /bin/sh ifconfig wlan0 upiwconfig wlan0 key 123456iwconfig wlan0 essid "rat-linux"iwcon ...
- 项目管理软件之易度1.5,禅道2.0,redmine1.2(附redmine1.2的安装)
http://www.cnblogs.com/ljzforever/archive/2011/06/29/2093786.html 公司最近准备分出一套人马去客户那里做驻场研发,这就涉及到代码库的统一 ...