封装弹框

css

/**--弹框--**/

.reg_suc {

    position: fixed;

    top: 0%;

    left: 0%;

    z-index: 999;

    width: 100%;

    height: 100%;

    background: rgba(0,0,0,0.8);

}

.success {

    width: 80%;

    height: 11.25rem;

    z-index: 95;

    background: #fff;

    margin: 0 auto;

    margin-top: 50%;

    border-radius: 5px;

}

.reg {

    display: inline-block;

    width: 74px;

    height: 72px;

    background: url(../../images/reg.png) no-repeat;

    background-size: 117%;

    position: relative;

    left: 35%;

    top: 15px;

}

.warn {

    display: inline-block;

    width: 74px;

    height: 72px;

    background: url(../../images/warn.png) no-repeat;

    background-size: 95%;

    position: relative;

    left: 35%;

    top: 15px;

}

.fail {

    display: inline-block;

    width: 74px;

    height: 72px;

    background: url(../../images/fail.png) no-repeat;

    background-size: 95%;

    position: relative;

    left: 35%;

    top: 15px;

}

.success>p {

    text-align: center;

    padding-top: 10px;

    font-size: 1.375rem;

}

.success .tolog {

    background: #ffba00;

    width: 50%;

    height: 1.875rem;

    border-radius: 5px;

    margin-left: 23%;

    margin-top: 10px;

    text-align: center;

    line-height: 1.875rem;

}

.success .tolog a {

    color: #fff;

}

a {

    text-decoration: none;

}

.yq-footer-copyright {

    margin-bottom: 30px;

}

点击事件写外面会不执行，因为html为虚拟对象

function alterTan(className,msg,btn,load){

    $('body').append("<div class='reg_suc'><div class='success'><i class="+className+"></i><p>"+msg+"</p><div class='tolog' ><a href='javascript:void(0);' >"+btn+"</a></div></div></div>");

    $(".tolog").bind('click',function(){ //等html元素加载完后再获取dom对象添加点击事件

        console.log(load); //判断按钮事件

        $('.reg_suc').css('display','none');

        if(load=='reload'){

            window.location.reload();

        }else if(load=='close'){

            return;

        }else if(load=='back'){

            window.location.href='index.html'

        }

    });

}