依赖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;}