1、layer mobile 是为移动设备（手机、平板等webkit内核浏览器/webview）量身定做的弹层UI。由于是采用原生 JavaScript编写，所有并不依赖任何第三方库。layer mobile完全独立于PC版的layer，您需要按照场景选择使用。
和layer PC版不同的是，只提供一个核心调用方法，即：layer.open(options)
layer移动版弹层 官网地址： https://layer.layui.com/mobile/
layer移动版弹层 API地址： https://layer.layui.com/mobile/api.html
PC版的layer弹层 官网地址： https://layer.layui.com/
PC版的layer弹层 API地址： https://www.layui.com/doc/modules/layer.html
前端UI框架layui官网： https://www.layui.com/
layer弹层组件PC版介绍以及使用方法示例代码： https://blog.csdn.net/qq_40015157/article/details/111884745
2、layer弹出层移动版轻量级，在官网下载layer移动版包后，引入layer.css 和 layer.js就可以使用，非常好用，pc端也能使用。示例代码：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>layer弹层组件移动版</title>
<link rel="stylesheet" href="layer/mobile/need/layer.css" target="_blank" rel="external nofollow" >
<style>
button {
height: 35px;
line-height: 35px;
border-radius: 2px;
background-color: #1AA094;
color: #fff;
border: none;
margin-bottom: 10px;
}
</style>
</head>
<body>
<button id="btn1">信息框</button>
<button id="btn2">提示</button>
<button id="btn3">询问框</button>
<button id="btn4">底部对话框</button>
<button id="btn5">底部提示</button>
<button id="btn6">自定义标题风格</button>
<button id="btn7">页面层</button>
<button id="btn8">loading层</button>
<button id="btn9">loading带文字</button>
</body>
</html>
<script src="../jquery.min.js"></script>
<script src="layer/mobile/layer.js"></script>
<script>
$("#btn1").on("click", function () {
//信息框
layer.open({
content: '移动版和PC版不能同时存在同一页面'
, btn: '我知道了'
});
});
$("#btn2").on("click", function () {
//提示
layer.open({
content: 'hello layer'
, skin: 'msg'
, time: 2 //2秒后自动关闭
});
});
$("#btn3").on("click", function () {
//询问框
layer.open({
content: '您确定要刷新一下本页面吗？'
, btn: ['刷新', '不要']
, yes: function (index) {
location.reload();
layer.close(index);
}
});
});
$("#btn4").on("click", function () {
//底部对话框
layer.open({
content: '这是一个底部弹出的询问提示'
, btn: ['删除', '取消']
, skin: 'footer'
, yes: function (index) {
layer.open({content: '执行删除操作'})
}
});
});
$("#btn5").on("click", function () {
//底部提示
layer.open({
content: '一个没有任何按钮的底部提示'
, skin: 'footer'
});
});
$("#btn6").on("click", function () {
//自定义标题风格
layer.open({
title: [
'我是标题',
'background-color: #FF4351; color:#fff;'
]
, content: '标题风格任你定义。'
});
});
$("#btn7").on("click", function () {
//页面层
layer.open({
type: 1
, content: '可传入任何内容，支持html。一般用于手机页面中'
, anim: 'up'
, style: 'position:fixed; bottom:0; left:0; width: 100%; height: 200px; padding:10px 0; border:none;'
});
});
$("#btn8").on("click", function () {
//loading层
layer.open({type: 2});
});
$("#btn9").on("click", function () {
//loading带文字
layer.open({
type: 2
, content: '加载中'
});
});
</script>
3、效果图：
