layer mobile是为移动设备（手机、平板等webkit内核浏览器/webview）量身定做的弹层UI。由于是采用原生 JavaScript编写，所有并不依赖任何第三方库。layer mobile完全独立于PC版的layer，您需要按照场景选择使用。layer mobile正致力于成为您WebApp开发过程中弹出交互的不二选择。GitHub
为了精确体验，您可通过Chrome设备模式浏览。或通过手机扫二维码进入
信息框 提示 询问框 底部对话框 底部提示 自定义标题风格 页面层 loading层 loading带文字
/** 以下是小试牛刀的调用代码（此处不展示事件绑定）*/
//信息框
layer.open({
content: '移动版和PC版不能同时存在同一页面'
,btn: '我知道了'
});
//提示
layer.open({
content: 'hello layer'
,skin: 'msg'
,time: 2 //2秒后自动关闭
});
//询问框
layer.open({
content: '您确定要刷新一下本页面吗？'
,btn: ['刷新', '不要']
,yes: function(index){
location.reload();
layer.close(index);
}
});
//底部对话框
layer.open({
content: '这是一个底部弹出的询问提示'
,btn: ['删除', '取消']
,skin: 'footer'
,yes: function(index){
layer.open({content: '执行删除操作'})
}
});
//底部提示
layer.open({
content: '一个没有任何按钮的底部提示'
,skin: 'footer'
});
//自定义标题风格
layer.open({
title: [
'我是标题',
'background-color: #FF4351; color:#fff;'
]
,content: '标题风格任你定义。'
});
//页面层
layer.open({
type: 1
,content: '可传入任何内容，支持html。一般用于手机页面中'
,anim: 'up'
,style: 'position:fixed; bottom:0; left:0; width: 100%; height: 200px; padding:10px 0; border:none;'
});
//loading层
layer.open({type: 2});
//loading带文字
layer.open({
type: 2
,content: '加载中'
});
一个在底部弹出的完整对话框：
layer.open({
title: [
'我是标题',
'background-color:#8DCE16; color:#fff;'
]
,anim: 'up'
,content: '展现的是全部结构'
,btn: ['确认', '取消']
});
运行
设置3秒自动关闭：
layer.open({
content: '通过style设置你想要的样式'
,style: 'background-color:#09C1FF; color:#fff; border:none;' //自定风格
,time: 3
});
运行
设置不允许点遮罩关闭：
layer.open({
content: '不允许点击遮罩关闭',
btn: '我知道了',
shadeClose: false,
yes: function(){
layer.open({
content: '好的'
,time: 2
,skin: 'msg'
});
}
});
运行
自定义一个全屏的页面层：
var pageii = layer.open({
type: 1
,content: html
,anim: 'up'
,style: 'position:fixed; left:0; top:0; width:100%; height:100%; border: none; -webkit-animation-duration: .5s; animation-duration: .5s;'
});
运行
请恕我们无法为您一一演示，我们更希望你认真去阅读文档，那里列举了layer所有的接口，它们会帮助你完成形形色色的展现形式。
layui.com出品