zoukankan      html  css  js  c++  java
  • 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;
    100px;
    height: 30px;
    cursor: pointer;
    }
    /*半透明遮罩*/
    .shade {
    position: fixed;
    100%;
    height: 100%;
    background-color: black;
    opacity: 0.4;
    z-index: 2;
    display: none;
    }
    /*警告框*/
    .warning {
    position: fixed;
    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;
    100%;
    height: 60px;
    color: red;
    font-size: 28px;
    line-height: 60px;
    text-align: center;
    }
    /*警告框内容*/
    .warn_context {
    position: relative;
    70%;
    left: 15%;
    min-height: 100px;
    font-size: 18px;
    text-indent: 30px;
    }
    /*警告框按钮*/
    .warn_btn {
    position: relative;
    100%;
    height: 50px;
    }
    /*警告框确定按钮*/
    .warn_btn_t {
    position: absolute;
    25%;
    left: 15%;
    height: 30px;
    background-color: #79cdcd;
    color: white;
    cursor: pointer;
    text-align: center;
    line-height: 30px;
    }
    /*警告框取消按钮*/
    .warn_btn_f {
    position: absolute;
    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);
    //不删除功能
    });

    效果展示:

  • 相关阅读:
    SQL0668N 由于表 "db2inst1.test" 上的原因代码 "3",所以不允许操作(解因为LOAD引起的LOAD暂挂状态锁)
    重装系统后,如何恢复DB2数据库?
    db2 导入导出命令大全
    解决tomcat启动时日志出现 javax.naming.NamingException: Invalid byte 1 of 1byte UTF8 sequence.的问题
    【fcntl系统调用】
    C++读书笔记之函数模板
    unix shell笔记
    用setsockopt()来控制recv()与send()的超时 【转】
    Linux守护进程的编程实现 [转]
    GDB调试core文件样例(如何定位Segment fault) 【转】
  • 原文地址:https://www.cnblogs.com/hcx999/p/6053648.html
Copyright © 2011-2022 走看看