自己写的弹窗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);
}