HTML弹窗加蒙层

xiaoxiao2021-02-28  9

js代码 var Tips = { prize:function(win){ var message = {0:{title:'领取成功',msg1:'恭喜您!',msg2:'已成功领取XX'}, 1:{title:'领取失败',msg1:'您尚还未满足领取条件,',msg2:'请先查看活动说明哦!'}, 2:{title:'领取失败',msg1:'今天已经领取',msg2:'请明天再来哦。'}, 3:{title:'领取失败',msg1:'您尚还未满足领取条件,',msg2:'先进行实名再来哦。'}, 4:{title:'领取失败',msg1:'您尚还未满足领取条件,',msg2:'消费未达标哦。'}, 5:{title:'领取失败',msg1:'您尚还未满足领取条件,',msg2:'不在活动时间内哦。'}, } var _template = "<div class='tips'>"+ "<div class='tips-prize'>" + "<h2 class='title'>{{title}}</h2>"+ "<p class='message'>{{msg1}}</p>"+ "<p class='message'>{{msg2}}</p>"+ "</div>" + "<div class='tips-btns'><a class='btn btn-ok'>确定</a></div>" + "</div>"+ "<div class='mask'></div>"; //重点在这 设置mask var msgobj = message[win]; _template = _template.replace("{{title}}",msgobj['title']); _template = _template.replace("{{msg1}}",msgobj['msg1']); _template = _template.replace("{{msg2}}",msgobj['msg2']); //中奖时给出背景 if(win==0){ _template = _template.replace("tips-prize","tips-prize"); } $("body").append(_template); this.close(); },

css样式

/**tips dialog*/ .tips{position:fixed;left:50%;top:50%;width:5.7rem;height:5.44rem;margin-top:-2.72rem;margin-left:-2.85rem;z-index:1000;background:#fff;border-radius:0.1rem} .mask{position:fixed;width:100%;height:100%;left:0;top:0;z-index:999;background:rgba(0,0,0,0.5);} 重点给tips和mask加属性z-index

转载请注明原文地址: https://www.6miu.com/read-450337.html

最新回复(0)