jQuery一个简单的弹框提示

2019-01-15  本文已影响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)
    }
}

上一篇下一篇

猜你喜欢

热点阅读