PC端弹窗组件，js已经封装

最新推荐文章于 2024-08-19 14:13:03 发布

walkman

最新推荐文章于 2024-08-19 14:13:03 发布

阅读量1.2k

点赞数

分类专栏： JQ 文章标签：弹窗组件

本文链接：https://blog.csdn.net/zhh830619/article/details/84399681

版权

JQ 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

依赖JQ，请先引用
html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/layer_pc.css">
<style>
    .ll-vip-btn{width: 240px;height:40px;line-height:40px;border-radius: 10px;border: 1px #2F7DCD solid; color: #2f7dcd;text-align: center;font-size:24px;display: inline-block;}
</style>

</head>
<body>
<div class="ll-vip-btn ll-layer1" >我是弹出层1</div>
<div class="ll-vip-btn ll-layer2" >我是弹出层2</div>
<div class="ll-vip-btn ll-layer3" >我是弹出层3</div>
<div class="ll-vip-btn ll-layer4" >我是弹出层4</div>
<div class="ll-vip-btn ll-layer5" id="text" >我是MSG</div>



<script src="js/jquery.min.js"></script>

<script src="js/layer_pc.js"></script>
<script>
    $(function () {

        //弹出信息提示   wk_msg(content,callback);参数content是内容；callback是回调函数，默认值0或不写；；
        $('.ll-layer5').click(function () {
            var content ='我是MSG！我是MSG我是MSG我是';
            wk_msg(content);


        });

        // wk_layer(a,b,c,d,e,callback)参数a是宽度，b是高度，c是弹窗定位高度，默认是0，自定义值（0-100）；d是按钮配置，默认是0，关闭按钮是1,单按钮是2，双按钮是3；e是内容,callback是回调函数，只有点击确定按钮后才执行；
        $('.ll-layer1').click(function () {
            var bda ='弹出层，可以自定义大小';
            wk_layer(600,300,10,0,bda);
            $('.ll-cancel').click(function () {
                alert(11)
            })
        });
        $('.ll-layer2').click(function () {
            var bda ='弹出层，带关闭按钮，可以自定义大小';
            wk_layer(600,300,40,1,bda);
            $('.ll-cancel').click(function () {
                alert(22)
            })
        });
        $('.ll-layer3').click(function () {
            var bda ='弹出层，带确定按钮，可以自定义大小';
            wk_layer(600,300,0,2,bda,function () {
                alert('回调')
            });
            $('.ll-cancel').click(function () {
                alert(33)
            })
        });
        $('.ll-layer4').click(function () {
            var bda ='弹出层，带双按钮，可以自定义大小';
            wk_layer(600,300,0,3,bda);
            $('.ll-cancel').click(function () {
                alert(44)
            })
        })

    })
</script>

</body>
</html>

JS代码：（layer_pc.js）

//公共弹出组件；
// 依赖JQ和common.css,请先引用；
//
//
// by walker v2.0;

//弹出层 wk_layer(a,b,c,d,e,callback)参数a是宽度，b是高度，c是弹窗定位高度，默认是0，自定义值（0-100）；d是按钮配置，默认是0，关闭按钮是1,单按钮是2，双按钮是3；e是内容；callback是回调函数，默认值为0或者不写，只有点击确定按钮后才执行；
function wk_layer(a,b,c,d,e,callback) {
    var layer_Width,layer_Height,layer_Top,layer_close,layer_btn,layer_cont;
    //宽度
    if (a == null || a === undefined || a === 0) {
        layer_Width = 500;
        //console.log('默认宽度500px');
    } else {
        layer_Width = a;
        //console.log('自定义宽度'+a);
    }
//高度
    if (b == null || b === undefined || b === 0) {
        layer_Height = 300;
        //console.log('默认高度300px');
    } else {
        layer_Height = b;
        //console.log('自定义高度'+b);
    }
//弹窗定位高度
    if (c === undefined ||c === 0) {
        layer_Top = '30';

    }else  {
        layer_Top = c;

    }
//弹窗按钮类型
    if (d == null || d === undefined || d === 0) {
        layer_close ='';
        layer_btn = '';

    }
    else if(d===1) {
        layer_close = '<div class="wk-close">X</div>';
        layer_btn = '';

    }
    else if(d===2) {
        layer_close ='';
        layer_btn = '<div class="wk-btn wk-submit">确定</div>';

    }
    else if(d===3) {
        layer_close ='';
        layer_btn = '<div class="wk-btn " ><div class="wk-symmetry wk-cancel wk-font-gray">取消</div><div class="wk-symmetry wk-submit">确定</div></div>';

    }
//内容
    if (e == null || e === undefined || e === 0) {
        layer_cont = '';

    }else if(e!=='') {
        layer_cont = e;

    }

    var marLeft = layer_Width / 2;
    var layerTop = "<div class=\"wk-pop\" style=\"width: " + layer_Width + "px;top:"+layer_Top+"%;margin-left:-" + marLeft + "px;\"><div style='height: "+ layer_Height +"px'>" + layer_cont +"</div>" +layer_close + "</div><div class=\"wk-mask\"></div>";
    $('body').append(layerTop);
    $('.wk-pop').append(layer_btn);

    $('.wk-mask').click(function () {
        $('.wk-pop').remove();
        $(this).remove();


    });
    $('.wk-close').click(function () {
        $('.wk-pop').remove();
        $('.wk-mask').remove();

    });
    $('.wk-btn').click(function () {
        $('.wk-pop').remove();
        $('.wk-mask').remove();
    });

    $('.wk-submit').click(function () {
        if (callback == null || callback === undefined || callback === 0) {
            callback = null;
        }
        else if(callback!=null){
            callback();
        }

    });

}


//弹出信息提示   ll_msg(content,callback);参数content是内容；callback是回调函数，默认值0或不写；
function wk_msg(content,callback) {
    var msgW = 400;
    var marLeft = msgW / 2;
    var msgTop = "<div class=\" wk-msg\"  style=\"width:"+msgW+"px;margin-left:-" + marLeft + "px;\">" + content + "</div>";

    $('body').append(msgTop);
    setTimeout(function () {
        $('.wk-msg').remove();
        if (callback == null || callback === undefined || callback === 0) {
            callback = null;
        }
        else if(callback!=null){
            callback();
        }
    },2500);


}

css代码：（common.css）

/*弹窗组件*/
.wk-mask{position: fixed;top:0;left:0;right:0;bottom:0;background: rgba(0,0,0,.3);z-index: 999;}
.wk-close{position:absolute;right:10px;top:10px;width:30px;height:30px;line-height:30px;text-align:center;font-size:20px;color: #999;z-index: 99999;border-radius: 100%;background: #d8d8d8;border: 1px #ccc solid;}
.crm-btn{width:100%;display:table;border:1px #ccc solid;text-align:center;color: #007aff;height: 45px;line-height: 45px;font-size: 18px;}
.wk-symmetry{width: 50%;display: table-cell;height: 45px;line-height: 45px;}
.wk-symmetry:first-child{border-right:1px #ccc solid;color: #666666; }
.wk-pop{position: fixed;overflow:hidden;-moz-box-shadow: 0 0 25px rgba(0,0,0,.3);-webkit-box-shadow: 0 0 25px rgba(0,0,0,.3);box-shadow: 0 0 25px rgba(0,0,0,.3);height: auto;left:50%;z-index:9999;background: #fff;border-radius:20px;}
.wk-msg{position: fixed;height: auto;overflow:hidden;-moz-box-shadow: 0 0 25px rgba(0,0,0,.2);-webkit-box-shadow: 0 0 25px rgba(0,0,0,.2);box-shadow: 0 0 25px rgba(0,0,0,.2);padding:20px;font-size:18px;line-height:22px;text-align:center;color:#fff;word-break:break-all;word-wrap:break-word;left:50%;top:40%;z-index:9999;background:rgba(0,0,0,0.7);border-radius:10px;}
.wk-btn-small{width: 80px;height: 30px;line-height: 30px;text-align: center;color: #fff;border-radius: 2px;margin: 0 10px;font-size: 12px;background: #007aff;display: inline-block}
.wk-btn-small:hover{color: #fff;}