html:
<div class=”mask”> <div class=”mask_Cont”> <div class=”active_top”> <p class=”active_close”> <img class=”Close_thisz” src=”/Public/tpl/static/guajiang/images/active_top_close.png”/></p> </div> <div class=”active_Prize”> <h1>消息提醒</h1> <p id=”msg”>活动已结束,奖项清空!</p> </div> <p class=”active_now”>知道啦</p> </div> </div>
css:
.mask{.mask{ z-index: 5; width: 100%; height: 100%; position: fixed; bottom: 0; background: rgba(0,0,0,0.7); overflow: hidden; display: none; } .mask_Cont{ width: 60%; height: 260px; background-color: #FFFFFF; border-radius: .1rem; margin-left: auto; margin-right: auto; margin-top: 40%; overflow: hidden; padding-bottom: .3rem; } .active_top{ width: 100%; margin-bottom: .3rem; } .active_close{ width: 100%; height: .6rem; position: relative; } .active_close img{ position: absolute; bottom: 0; width: 30px; height: 30px; right: 10px; top: 10px; } .active_Prize{ width: 100%; padding-left: 10px; padding-right: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; overflow: hidden; margin-bottom: .2rem; position: relative; } .active_Prize h1{ font-size: 26px; color: #ff3744; margin-bottom: .1rem; } .active_Prize p{ color: #838383; font-size: 24px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-align: center; margin-top: 1rem; } .active_now{ margin-left: auto; margin-right: auto; width: 50%; height: 56px; text-align: center; line-height: 56px; font-size: 30px; background-color: #ffdd4e; color: #8B521A; margin-top: 50px; border-radius: 10px; -webkit-border-radius: 10px; }
js:
//活动说明$(“.active_now, .Close_thisz”).click(function(){ close($(“.mask”)); });
function close(obj){ obj.fadeOut(200); };
function show(obj){ obj.fadeIn(200); }
show($(“.mask”));
