自己写的弹窗JS组件，依赖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">
<link rel="stylesheet" href="https://llcdn.enry.cn/llwx/css/base.css">
<link rel="stylesheet" href="https://llcdn.enry.cn/llwx/css/common.css">
</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="https://llcdn.enry.cn/llwx/js/jquery.min.js"></script>
<script src="js/layer_mobile.js"></script>
<script>
$(function () {
//弹出信息提示 ll_msg(content,callback);参数content是内容；callback是回调函数，默认值0或不写；；
$('.ll-layer5').click(function () {
var content ='我是MSG！我是MSG我是MSG我是';
ll_msg(content);
});
// ll_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 ='弹出层，可以自定义大小';
ll_layer(6,3,10,0,bda);
$('.ll-cancel').click(function () {
alert(11)
})
});
$('.ll-layer2').click(function () {
var bda ='弹出层，带关闭按钮，可以自定义大小';
ll_layer(6,3,40,1,bda);
$('.ll-cancel').click(function () {
alert(22)
})
});
$('.ll-layer3').click(function () {
var bda ='弹出层，带确定按钮，可以自定义大小';
ll_layer(6,3,0,2,bda,function () {
alert('回调')
});
$('.ll-cancel').click(function () {
alert(33)
})
});
$('.ll-layer4').click(function () {
var bda ='弹出层，带双按钮，可以自定义大小';
ll_layer(6,3,0,3,bda);
$('.ll-cancel').click(function () {
alert(44)
})
})
})
</script>
</body>
</html>
js代码：
//公共弹出组件；
// 依赖JQ和common.css,请先引用；
//
//
// by walker v2.0;
//弹出层 l_layer(a,b,c,d,e,callback)参数a是宽度，b是高度，c是弹窗定位高度，默认是0，自定义值（0-100）；d是按钮配置，默认是0，关闭按钮是1,单按钮是2，双按钮是3；e是内容；callback是回调函数，默认值为0或者不写，只有点击确定按钮后才执行；
function ll_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 = 5;
//console.log('默认宽度500px');
} else {
layer_Width = a;
//console.log('自定义宽度'+a);
}
//高度
if (b == null || b === undefined || b === 0) {
layer_Height = 3;
//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="ll-o2 ll-close" style="right:-0.3rem;top:-0.3rem;width:0.6rem;height:0.6rem;line-height:0.6rem;text-align:center;font-size:0.4rem;color: #999;z-index: 99;border-radius: 100%;background: #fff;border: 1px #ccc solid;">X</div>';
layer_btn = '';
}
else if(d===2) {
layer_close ='';
layer_btn = '<div class="ll-b1 ll-k20 ll-m1 ll-j1 ll-btn ll-submit" style="color: #007aff;height: 0.9rem;line-height: 0.9rem;">确定</div>';
}
else if(d===3) {
layer_close ='';
layer_btn = '<div class="ll-b1 ll-k20 ll-m1 ll-j1 ll-btn " style="color: #007aff;height: 0.9rem;line-height: 0.9rem;"><div class="ll-k10 ll-a1 ll-j3 ll-cancel ll-font-gray">取消</div><div class="ll-k10 ll-a1 ll-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=\"ll-o2 ll-pop\" style=\"width: " + layer_Width + "rem;-moz-box-shadow: 0 0 0.5rem rgba(0,0,0,.3);-webkit-box-shadow: 0 0 0.5rem rgba(0,0,0,.3);box-shadow: 0 0 0.5rem rgba(0,0,0,.3);height: auto;left:50%;top:"+layer_Top+"%;z-index:990;margin-left:-" + marLeft + "rem;background: #fff;border-radius:0.2rem;\"><div style='height: "+ layer_Height +"rem'>" + layer_cont +"</div>" +layer_close + "</div><div class=\"ll-mask\"></div>";
$('body').append(layerTop);
$('.ll-pop').append(layer_btn);
$('.ll-mask').click(function () {
$('.ll-pop').remove();
$(this).remove();
});
$('.ll-close').click(function () {
$('.ll-pop').remove();
$('.ll-mask').remove();
});
$('.ll-btn').click(function () {
$('.ll-pop').remove();
$('.ll-mask').remove();
});
$('.ll-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 ll_msg(content,callback) {
var msgW = 4;
var marLeft = msgW / 2;
var msgTop = "<div class=\"ll-o2 ll-msg\" id='ll_msg' style=\"width:"+msgW+"rem;height: auto;-moz-box-shadow: 0 0 0.5rem rgba(0,0,0,.2);-webkit-box-shadow: 0 0 0.5rem rgba(0,0,0,.2);box-shadow: 0 0 0.5rem rgba(0,0,0,.2);padding:0.2rem;font-size:0.26rem;line-height:0.3rem;text-align:center;color:#fff;word-break:break-all;word-wrap:break-word;left:50%;top:40%;z-index:990;margin-left:-" + marLeft + "rem;background:rgba(0,0,0,0.6);border-radius:0.1rem;\">" + content + "</div>";
$('body').append(msgTop);
setTimeout(function () {
$('.ll-msg').remove();
if (callback == null || callback === undefined || callback === 0) {
callback = null;
}
else if(callback!=null){
callback();
}
},2500);
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
