封装弹框

封装
function funTips(title,content,targetUrl,img,targetTip) {
var str =’’;
str += <div class="popover_box" > <div class="popover"> <div class="popover_img"> <img src="${img}" alt=""> </div> <div class="popover_text"> <div class="text_box"> <h1>${title}</h1> <h2 id="content">${content}</h2> </div> <a href="${targetUrl}">${targetTip}</a> </div> <div class="cancel"> <img src="../../images/icon/cancel.png" alt=""> </div> </div> </div>;
$(".content").append(str) 插入html页面

}

调用
var title = “问卷提交成功!”; //主要提示语
var img = h5Url+“images/banner/popover/popover_img.png”; //提示框背景图片
var content = “”; //补充提示语
var targetUrl = h5Url+“html/user/ucenter.html”; //点击提示框按钮跳转链接
var targetTip = “我知道了”; //按钮提示文字

funTips(title,content,targetUrl,img,targetTip); //调用提示框并传参

$_(“content”).style.display = “none”; //补充语为空，隐藏该元素
$(".cancel").click(function () { //提示框下取消按钮点击事件
window.location.href = h5Url+“html/user/ucenter.html”; //点击跳转
})

css样式
/popover弹框/
.popover_box{
width: 10rem;
height: 900px;
margin: 0 auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background-color: rgba(0,0,0,.5);
}
.popover{
width: 7.466666666666667rem;
height: 4.533333333333333rem;
position: absolute;
top: 18%;
left: 1.2666666666666666rem;
border-radius: 0.16rem;
}
.popover_img{
position: absolute;
left: 0;
top: 0;
z-index: 222;
}
.popover_img img{
width: 7.466666666666667rem;
height: 4.533333333333333rem;
}
.popover_text{
position: absolute;
left: 0;
top: 0;
z-index: 333;
}
.popover_text h1{
width: 6.666666666666667rem;
text-align: center;
font-size: 0.5333333333333333rem;
letter-spacing: 0.02666666666666667rem;
}
.popover_text h2{
width: 6.666666666666667rem;
text-align: center;
font-size: 0.4266666666666667rem;
letter-spacing: 0.02666666666666667rem;
}
.popover_text a{
width: 4rem;
height: 1.0666666666666667rem;
background-color: #fa7c56;
font-size: 0.4rem;
color: #fff;
text-align: center;
line-height: 1.0666666666666667rem;
border-radius: 0.6666666666666666rem;
letter-spacing: 0.05333333333333334rem;
position: absolute;
top: 2.933333333333333rem;
left: 1.7333333333333334rem;
}
.popover_text .text_box{
width: 6.666666666666667rem;
height: 2rem;
position: absolute;
top: 0.6666666666666666rem;
left: 0.4rem;
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.cancel {
position: absolute;
left: 3.2rem;
bottom: -1.6rem;
}
.cancel img{
width: 1.0666666666666667rem;
height: 1.0666666666666667rem;
}