移动端封装弹出框样式

 

 

 

 

 

 

<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  图片链接