HTML弹窗加蒙层

来源：互联网发布：什么看书软件免费编辑：程序博客网时间：2024/06/06 14:22

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>";  //重点在这 设置maskvar 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

阅读全文

0 0