带遮罩层弹出框

<div class="boat-mask">
        <div class="boat-dialog">
            <div class="boat-dialog-top">
                <img class="gift-icon" src="/">  /*放置一张图片*/
                <div class="boat-dialog-top-txt">恭喜你!</div>
            </div>
            <div class="boat-dialog-con">获得<span class="boat-dialog-message"></span></div>
            <div class="boat-dialog-tip"></div>
            <div class="boat-dialog-bottom clearfloat">
                <div class="boat-dialog-btn2 hide f-l">知道了</div>
                <div class="boat-dialog-btn">去查看</div>
            </div>
        </div>
    </div>

　　css

/*弹框效果*/
.boat-mask {
    display: none;
    width: 100%;
    height: auto;
    background-color: rgba(0,0,0,.5);
    position: fixed;
    top: 0;
    z-index: 100;
}
.boat-dialog {
    width: 90%;
    margin: 0 auto;
    background-color: #fff;
    position: relative;
    top: 150px;
}
.boat-dialog-top {
    position: relative;
    width: 150px;
    margin: 0 auto;
    height: 60px;
}
.boat-dialog-top-txt {
    position: absolute;
    width: 100px;
    top: 36px;
    left: 80px;
    color: #666;
    font-size: 18px;
}
.boat-dialog-con {
    color: #ff744b;
    text-align: center;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.boat-dialog-bottom {
    width: 220px;
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
}
.boat-dialog-btn2 {
    width: 120px;
    margin: 0 auto;
    display: inline-block;
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    border: 2px solid #16b473;
    color: #16b473;
    text-align: center;
    border-radius: 2px;
}
.boat-dialog-btn {
    width: 90px;
    margin: 0 auto;
    display: inline-block;
    background-color: #16b473;
    height: 33px;
    line-height: 33px;
    border: 2px solid #16b473;
    color: #fff;
    text-align: center;
    border-radius: 2px;
}
.gift-icon {
    position: absolute;
    left: 0;
    top: -4px;
    width: 120px;
}
.boat-dialog-tip{
    color: #999;
    width: 270px;
    margin: 0 auto;
}
.dragon-prize-active{
    position: relative;
    z-index: 10;
}
.boat-dialog-btn2 {
    width: 90px;
    background-color: #fff;
    margin: 0 auto;
    height: 33px;
    line-height: 33px;
    border: 2px solid #16b473;
    color: #16b473;
    text-align: center;
    border-radius: 2px;
}

　　js

dialog:function () {
                var message = '充电宝',
                    url = '前往某个页面的url',
                    tip = '可以有个提示信息';
                
                var bodyH = window.document.body.offsetHeight,availH = document.body.clientHeight,maskH,$dialogBtn = $(".boat-dialog-btn"),$dialogBtn2 = $(".boat-dialog-btn2");
                if(bodyH > availH){
                    maskH = bodyH;
                }else{
                    maskH = availH;
                }
                $(".boat-dialog-message").html(message);
                $(".boat-mask").css("height",maskH).show();
                $(".boat-dialog").show();

                if("显示两个按钮"){

                    $dialogBtn2.show().html('知道了');

                    $dialogBtn.html("去查看").addClass('f-r');

                }else{                      //显示一个按钮
                    $dialogBtn2.hide();
                    $dialogBtn.html("知道了").removeClass('f-r');
                }


                if(tip && tip != ""){
                    $(".boat-dialog-tip").html(tip);
                }

                $dialogBtn.off().on("click",function(){
                    $(".boat-mask").hide();
                    $(".boat-dialog").hide();

                    if(url && url != ""){
                        location.href = url;
                    }

                });
                $dialogBtn2.off().on("click",function(){
                    $(".boat-mask").hide();
                    $(".boat-dialog").hide();

                });

            }

　　

转载于:https://www.cnblogs.com/qinglingyue/p/5570357.html