美文网首页
jQuery一个简单的弹框提示

jQuery一个简单的弹框提示

作者: 白衣诗人 | 来源:发表于2019-01-15 11:02 被阅读0次
    /**
     * 弹框提示
     * @param ImgSrc 提示图片 值:1=>成功;2=>失败;3=>加载中
     * @param Hint 提示内容
     * @param Keep 提示显示时间
     * @param Urles 调转连接
     * @constructor
     */
    function Massage(ImgSrc,Hint,Keep,Urles) {
        var dom = "<div class='Popout'>" +
            "<div class='PopoutBox '>" +
            "<div class='PopoutBox-shake animated shake flex justify-content-start align-items-center'>" +
            " <img src=''>" +
            "<div class='Popout-title font30'>" +Hint+
            "</div>" +
            "</div>" +
            "</div>" +
            "</div>";
    
        if(ImgSrc == 1){
            //成功提示
            $("body").append(dom);
            $(".PopoutBox img").attr('src','public/image/icon-succeed.png');
        }else if (ImgSrc == 2){
            //失败提示
            $("body").append(dom);
            $(".PopoutBox img").attr('src','public/image/icon-failure.png');
        }else if(ImgSrc == 3){
            //加载
            $("body").append(dom);
            $(".PopoutBox img").attr('src','public/image/icon-load.gif');
        }
        var times  = setTimeout(function () {
            clearTimeout(times);
            $(".Popout").remove();
            if(Urles){
                window.location.href = Urles;
            }
    
        },Keep?Keep:2000);
    }
    
    .Popout{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 999;
    }
    .PopoutBox{
    
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
    .PopoutBox-shake{
        min-height: 1.2rem;
        min-width: 3rem;
        padding: 0.2rem;
        box-sizing: border-box;
        -moz-box-shadow:0px 1px 0.2rem rgba(31,31,31,0.2);
        -webkit-box-shadow:0px 1px 0.2rem rgba(31,31,31,0.2);
        box-shadow:0px 1px 0.2rem rgba(31,31,31,0.2);
        -webkit-border-radius: 0.08rem;
        -moz-border-radius: 0.08rem;
        border-radius: 0.08rem;
        overflow: hidden;
        background: #fff;
        box-sizing: border-box;
    }
    .PopoutBox img{
        width: 0.5rem;
        margin-right: 0.1rem;
    }
    .Popout-title{
        color: #57a3f5;
    }
    
    
    #animated,
    .animated {
        animation-duration: 1s;
        animation-fill-mode: both
    }
    @keyframes shake {
        0%,to {
            transform: translateZ(0)
        }
    
        10%,30%,50%,70%,90% {
            transform: translate3d(4px,0,0)
        }
    
        20%,40%,60%,80% {
            transform: translate3d(4px,0,0)
        }
    }
    
    

    相关文章

      网友评论

          本文标题:jQuery一个简单的弹框提示

          本文链接:https://www.haomeiwen.com/subject/tjbedqtx.html