• 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);
    //不删除功能
    });

    效果展示:

  • 相关阅读:
    用Python学分析
    用Python学分析
    描述性统计指标
    用Python学分析
    Python练习:哥德巴赫猜想
    用Python学分析
    用Python学分析:集中与分散
    用Python学分析
    Ubuntu安装中文输入法
    Kali Linux ettercap的使用
  • 原文地址:https://www.cnblogs.com/hcx999/p/6053648.html
Copyright © 2020-2023  润新知