移动端封装弹出框样式
作者：互联网
<div class="alert"> <div id="alert_content"> <img src="../img/err.png" class="err_img" alt=""> <img src="../img/ok.png" class="ok_img" alt=""> <div class="err_content"></div> </div> </div> 样式为 .show{display:block} .hide{display:none} .alert{position: fixed; top:0;width:100%;max-width:9.8rem; height:100%; z-index: 999999; display: none; background: rgba(0,0,0,0.5); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,endColorstr=#b2000000);} .alert #alert_content{width:80%;padding:0.6rem;border: 1px solid #ddd;border-radius:5px;position: absolute;background-color: #fff;z-index:101;top: 25%;left: 10%;text-align: left;font-size:0.32rem;color: #666; line-height: 1.5rem;} .alert #alert_content .err_content{padding-left:1rem;} .alert img{display: none;float: left;width:0.6rem;position: absolute;left:0.6rem;top:50%;} .alert span{position: absolute;top: 0;right:0;color: #aaa;padding: 6px 10px;cursor: pointer;font-size: 25px;} .alert .err{line-height:1.2em;text-align:left;word-break: break-all ;} .alert .err img.err_img{display: block;margin-top:-0.3rem;} .alert .ok{word-break:break-all;text-align: left;} .alert .ok img.ok_img{display: block;margin-top:-0.2rem;} #back{position: fixed;width: 100%;height: 100%; background:rgba(0,0,0,0.5); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,endColorstr=#b2000000); background-color:rgb(51, 51, 51)} 封装方法 function show_info(msg, class_name, url) { if (class_name == "") { class_name = 'err' } if (url == "") { url = '' } $(".alert").css('display', 'block'); $("#alert_content").addClass(class_name); $("#alert_content .err_content").html(msg); clearInterval(intervalObj); intervalObj = setTimeout(function() { $(".alert").hide(); $("#alert_content").removeClass(class_name); $("#alert_content .err_content").html(''); jump_url = url; if (url) { location.href = url; } }, 2000) } 页面使用 show_info(res.msg, 'ok',url) show_info(res.msg, 'err',url) http://m.lusenky.com/img/err.png http://m.lusenky.com/img/ok.png 图片链接
标签：封装,img,err,样式,alert,content,url,弹出,rem 来源： https://www.cnblogs.com/yang193082/p/16070275.html