1. 程式人生 > 其它 >移動端封裝彈出框樣式

移動端封裝彈出框樣式

 

 

 

 

 

 

<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  圖片連結