HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>layer - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V4是一个后台管理系统的HTML模板，基于Bootstrap v4.4.1。">
<meta name="author" content="yinqi">
<link href="http://lyear.itshubao.com/iframe/v4/css/bootstrap.min.css" rel="stylesheet">
<link href="http://example.itshubao.com/demo/css/materialdesignicons.min.css" rel="stylesheet">
<link href="http://lyear.itshubao.com/iframe/v4/css/style.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid pt-15">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header"><div class="card-title">layer</div></div>
<div class="card-body">
<p>插件使用layer v3.1.1，文档地址：<a href="https://layer.layui.com/" target="_blank">https://layer.layui.com/</a>。为了更合适光年模板，这里对插件做了一些调整，去除了一些图片，调整为字体图标，调整了颜色搭配。</p>
<div class="callout callout-info mb-3">弹窗动画完成后，谷歌浏览器下有一个hover的bug，鼠标移到最后一个按钮时，字有1px的移动。</div>
<h6>使用弹窗</h6>
<div class="border-example"><button class="btn btn-default" id="example-1">初始</button></div>
<pre>$('#example-1').click(function() {
layer.alert('钱月英酬神还愿 冯子清误入桃园');
});</pre>
<h6>使用图标</h6>
<p>为了更易识别，这里将图标的设置值改为：<code>success</code>、<code>error</code>、<code>doubt</code>、<code>lock</code>、<code>cry</code>、<code>smile</code>、<code>warning</code>。</p>
<div class="border-example">
<div id="example-icon">
<button class="btn btn-primary" data-icon="success">正确</button>
<button class="btn btn-danger" data-icon="error">错误</button>
<button class="btn btn-yellow" data-icon="doubt">疑问</button>
<button class="btn btn-secondary" data-icon="lock">锁定</button>
<button class="btn btn-pink" data-icon="cry">哭脸</button>
<button class="btn btn-success" data-icon="smile">笑脸</button>
<button class="btn btn-warning" data-icon="warning">警告</button>
</div>
</div>
<pre><p id="example-icon">
<button class="btn btn-primary" data-icon="success">正确</button>
<button class="btn btn-danger" data-icon="error">错误</button>
<button class="btn btn-yellow" data-icon="doubt">疑问</button>
<button class="btn btn-secondary" data-icon="lock">锁定</button>
<button class="btn btn-pink" data-icon="cry">哭脸</button>
<button class="btn btn-success" data-icon="smile">笑脸</button>
<button class="btn btn-warning" data-icon="warning">警告</button>
</p>
// 使用图标
$('#example-icon').find('.btn').click(function() {
layer.alert('赠金扇冯旭得意 拜天地翠秀许婚', {
icon: $(this).data('icon'),
})
});</pre>
<h6>询问框</h6>
<div class="border-example">
<button class="btn btn-default" id="example-2">询问</button>
</div>
<pre>layer.confirm('游西湖林璋遇故 卖宝剑马云逢凶？', {
btn: ['重要', '奇葩'] //按钮
}, function(){
layer.msg('的确很重要', {icon: 'success'});
}, function(){
layer.msg('也可以这样', {
time: 20000, //20s后自动关闭
btn: ['明白了', '知道了']
});
});</pre>
<h6>提示层</h6>
<div class="border-example">
<button class="btn btn-default" id="example-3">提示层</button>
<button class="btn btn-default" id="example-14">loading层</button>
</div>
<pre>layer.msg('马云大闹五柳园 汤彪仗义赠金帛');
layer.msg('诸葛亮智算华容 关云长义释曹操', function(){
//关闭后的操作
});</pre>
<h6>风格</h6>
<p>这里新增了弹窗的样式皮肤：<code>lyear-skin-primary</code>、<code>lyear-skin-success</code>、<code>lyear-skin-info</code>、<code>lyear-skin-warning</code>、<code>lyear-skin-danger</code>、<code>lyear-skin-secondary</code>、<code>lyear-skin-purple</code>、<code>lyear-skin-pink</code>、<code>lyear-skin-cyan</code>、<code>lyear-skin-yellow</code>、<code>lyear-skin-brown</code>、<code>lyear-skin-dark</code>。</p>
<div class="border-example">
<div id="example-skin">
<button class="btn btn-primary" data-skin="lyear-skin-primary">主色</button>
<button class="btn btn-success" data-skin="lyear-skin-success">成功</button>
<button class="btn btn-info" data-skin="lyear-skin-info">信息</button>
<button class="btn btn-warning" data-skin="lyear-skin-warning">警告</button>
<button class="btn btn-danger" data-skin="lyear-skin-danger">错误</button>
<button class="btn btn-secondary" data-skin="lyear-skin-secondary">灰色</button>
<button class="btn btn-purple" data-skin="lyear-skin-purple">紫色</button>
<button class="btn btn-pink" data-skin="lyear-skin-pink">粉红</button>
<button class="btn btn-cyan" data-skin="lyear-skin-cyan">青色</button>
<button class="btn btn-yellow" data-skin="lyear-skin-yellow">黄色</button>
<button class="btn btn-brown" data-skin="lyear-skin-brown">棕色</button>
<button class="btn btn-dark" data-skin="lyear-skin-dark">黑色</button>
</div>
</div>
<pre><div id="example-skin">
<button class="btn btn-primary" data-skin="lyear-skin-primary">主色</button>
<button class="btn btn-success" data-skin="lyear-skin-success">成功</button>
<button class="btn btn-info" data-skin="lyear-skin-info">信息</button>
<button class="btn btn-warning" data-skin="lyear-skin-warning">警告</button>
<button class="btn btn-danger" data-skin="lyear-skin-danger">错误</button>
<button class="btn btn-secondary" data-skin="lyear-skin-secondary">灰色</button>
<button class="btn btn-purple" data-skin="lyear-skin-purple">紫色</button>
<button class="btn btn-pink" data-skin="lyear-skin-pink">粉红</button>
<button class="btn btn-cyan" data-skin="lyear-skin-cyan">青色</button>
<button class="btn btn-yellow" data-skin="lyear-skin-yellow">黄色</button>
<button class="btn btn-brown" data-skin="lyear-skin-brown">棕色</button>
<button class="btn btn-dark" data-skin="lyear-skin-dark">黑色</button>
</div>
// 风格
$('#example-skin').find('.btn').click(function() {
layer.alert('真才子走笔成章 假斯文揉碎肚肠', {
skin: $(this).data('skin'),
});
});</pre>
<h6>捕获页</h6>
<div class="border-example">
<div class="test-example-4">
<ul class="list-unstyled p-3 mb-0">
<li>第06回 姚夏封广陵风鉴 常万青南海朝山</li>
<li>第07回 朱翰林代为月老 冯子清聘定月英</li>
<li>第08回 魏家妇人前卖俏 花文芳黑夜偷情</li>
</ul>
</div>
<button class="btn btn-default" id="example-4">捕获页</button>
</div>
<pre><div class="test-example-4">
<ul class="list-unstyled p-3 mb-0">
<li>第06回 姚夏封广陵风鉴 常万青南海朝山</li>
<li>第07回 朱翰林代为月老 冯子清聘定月英</li>
<li>第08回 魏家妇人前卖俏 花文芳黑夜偷情</li>
</ul>
</div>
<button class="btn btn-default" id="example-4">捕获页</button>
// 捕获页
$('#example-4').click(function() {
layer.open({
type: 1,
shade: false,
title: false, //不显示标题
content: $('.test-example-4'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
cancel: function(){
layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon: 'success'});
}
});
});</pre>
<h6>页面层</h6>
<div class="border-example">
<button class="btn btn-default" id="example-5">页面层</button>
</div>
<pre>$('#example-5').click(function() {
layer.open({
type: 1,
skin: 'layui-layer-rim', // 加上边框
area: ['420px', '240px'], // 宽高
content: '<div class="p-3">魏临川于中取利 花文芳将计就计</div>'
});
});</pre>
<h6>tips层</h6>
<div class="border-example">
<button class="btn btn-default" id="example-6">Tips层</button>
</div>
<pre>$('#example-6').click(function() {
layer.tips('Hi，我是tips', '#example-6');
});</pre>
<h6>iframe层</h6>
<div class="border-example">
<button class="btn btn-default" id="example-7">iframe层</button>
</div>
<pre>$('#example-7').click(function() {
layer.open({
type: 2,
title: 'Light Year Admin',
shadeClose: true,
shade: 0.5,
area: ['380px', '90%'],
content: 'http://lyear.itshubao.com' //iframe的url
});
});</pre>
<h6>iframe窗</h6>
<div class="border-example">
<button class="btn btn-default" id="example-8">iframe窗</button>
</div>
<pre>$('#example-8').click(function() {
layer.open({
type: 2,
title: false,
closeBtn: 0, //不显示关闭按钮
shade: [0],
area: ['340px', '215px'],
offset: 'rb', //右下角弹出
time: 2000, //2秒后自动关闭
anim: 2,
content: ['README.md', 'no'], //iframe的url，no代表不显示滚动条
end: function(){ //此处用于演示
layer.open({
type: 2,
title: '很多时候，我们想最大化看，比如像这个页面。',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['893px', '600px'],
content: '//fly.layui.com/'
});
}
});
});</pre>
<h6>加载层</h6>
<p>这里将gif动画改为 <code>css3</code> 动画，风格仍然保留0-2。</p>
<div class="border-example">
<div id="example-loading">
<button class="btn btn-default" data-effect='0'>加载层一</button>
<button class="btn btn-default" data-effect='1'>加载层二</button>
<button class="btn btn-default" data-effect='2'>加载层三</button>
</div>
</div>
<pre>$('#example-loading').find('.btn').click(function() {
var index = layer.load($(this).data('effect'), { shade: false }); // 第一个参数为风格，支持0-2
setTimeout(function(){
layer.close(index)
}, 3000);
});</pre>
<h6>loading层</h6>
<div class="border-example">
<button class="btn btn-default" id="example-9">loading层</button>
</div>
<pre>$('#example-9').click(function() {
var index = layer.load(0, { shade: [0.1, '#000'] }); // 0.1透明度的白色背景
setTimeout(function(){
layer.close(index)
}, 3000);
});</pre>
<h6>小tips</h6>
<div class="border-example">
<button class="btn btn-default" id="example-10">小tips</button>
</div>
<pre>$('#example-10').click(function() {
layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '#example-10', {
tips: [1, '#33cabb'],
time: 4000
});
});</pre>
<h6>prompt层</h6>
<div class="border-example">
<button class="btn btn-default" id="example-11">prompt层</button>
</div>
<pre>$('#example-11').click(function() {
layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
layer.close(index);
layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
layer.close(index);
layer.msg('演示完毕！您的口令：'+ pass +'<br>您最后写下了：'+text);
});
});
});</pre>
<h6>相册层</h6>
<div class="border-example">
<button class="btn btn-default" id="example-13">相册层</button>
</div>
<pre>$('#example-13').click(function() {
var json = {
"status": 1,
"msg": "",
"title": "JSON请求的相册",
"id": 8,
"start": 0,
"data": [{
"alt": "花", "pid": 109, "src": "//libs.itshubao.com/pic/small_007.jpg", "thumb": ""
},
{
"alt": "油菜花", "pid": 110, "src": "//libs.itshubao.com/pic/medium_003.jpg", "thumb": ""
},
{
"alt": "粉红", "pid": 111, "src": "images/slide/img-slide-1.jpg", "thumb": ""
},
{
"alt": "牵牛花", "pid": 112, "src": "//libs.itshubao.com/pic/big_005.jpg", "thumb": ""
},
{
"alt": "大娃", "pid": 113, "src": "images/users/avatar-1.png", "thumb": ""
}]
};
layer.photos({
photos: json // 格式见API文档手册页
, anim: 5 // 0-6的选择，指定弹出图片动画类型，默认随机
});
});</pre>
<h6>信息框</h6>
<p>模板信息框是白色背景的，你也可以用 <code>bg-*</code> 来增加信息框背景样式。</p>
<div class="border-example">
<div id="example-notice">
<button class="btn btn-default">默认</button>
<button class="btn btn-primary" data-bg="bg-primary">主色</button>
<button class="btn btn-success" data-bg="bg-success">成功</button>
<button class="btn btn-info" data-bg="bg-info">信息</button>
<button class="btn btn-warning" data-bg="bg-warning">警告</button>
<button class="btn btn-danger" data-bg="bg-danger">错误</button>
<button class="btn btn-secondary" data-bg="bg-secondary">灰色</button>
<button class="btn btn-purple" data-bg="bg-purple">紫色</button>
<button class="btn btn-pink" data-bg="bg-pink">粉红</button>
<button class="btn btn-cyan" data-bg="bg-cyan">青色</button>
<button class="btn btn-yellow" data-bg="bg-yellow">黄色</button>
<button class="btn btn-brown" data-bg="bg-brown">棕色</button>
<button class="btn btn-dark" data-bg="bg-dark">黑色</button>
</div>
</div>
<pre><div id="example-notice">
<button class="btn btn-default">默认</button>
<button class="btn btn-primary" data-bg="bg-primary">主色</button>
<button class="btn btn-success" data-bg="bg-success">成功</button>
<button class="btn btn-info" data-bg="bg-info">信息</button>
<button class="btn btn-warning" data-bg="bg-warning">警告</button>
<button class="btn btn-danger" data-bg="bg-danger">错误</button>
<button class="btn btn-secondary" data-bg="bg-secondary">灰色</button>
<button class="btn btn-purple" data-bg="bg-purple">紫色</button>
<button class="btn btn-pink" data-bg="bg-pink">粉红</button>
<button class="btn btn-cyan" data-bg="bg-cyan">青色</button>
<button class="btn btn-yellow" data-bg="bg-yellow">黄色</button>
<button class="btn btn-brown" data-bg="bg-brown">棕色</button>
<button class="btn btn-dark" data-bg="bg-dark">黑色</button>
</div>
// 信息框
$('#example-notice').find('.btn').click(function() {
layer.msg('不开心。。。', {
icon: 'cry',
skin: $(this).data('bg')
});
});</pre>
<h6>自定义页面层</h6>
<div class="border-example">
<button class="btn btn-default" id="emample-15">自定义页面层</button>
</div>
<pre>layer.open({
type: 1,
title: false,
closeBtn: 0,
shadeClose: true,
skin: 'bg-success',
content: '<div class="p-3"><h6>采桑子·时光只解催人老</h6>时光只解催人老，不信多情，长恨离亭，泪滴春衫酒易醒。<br>梧桐昨夜西风急，淡月胧明，好梦频惊，何处高楼雁一声？</div>'
});</pre>
<h6>tips层位置</h6>
<div class="border-example">
<button class="btn btn-default" id="example-top">上</button>
<button class="btn btn-default" id="example-bottom">下</button>
<button class="btn btn-default" id="example-left">左</button>
<button class="btn btn-default" id="example-right">右</button>
<button class="btn btn-default" id="example-more">多个</button>
</div>
<pre></pre>
<h6>弹出位置</h6>
<div class="border-example">
<div id="example-position">
<button class="btn btn-default" data-position="t">上弹出</button>
<button class="btn btn-default" data-position="r">右弹出</button>
<button class="btn btn-default" data-position="b">下弹出</button>
<button class="btn btn-default" data-position="l">左弹出</button>
<button class="btn btn-default" data-position="lt">左上弹出</button>
<button class="btn btn-default" data-position="lb">左下弹出</button>
<button class="btn btn-default" data-position="rt">右上弹出</button>
<button class="btn btn-default" data-position="rb">右下弹出</button>
<button class="btn btn-default" data-position="auto">居中弹出</button>
</div>
</div>
<pre></pre>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/v4/js/jquery.min.js"></script>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/v4/js/popper.min.js"></script>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/v4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/v4/js/main.min.js"></script>
<script type="text/javascript" src="http://libs.itshubao.com/layer/layer.min.js"></script>
</body>
</html>
JavaScript
$(document).ready(function() {
$('#example-1').click(function() {
layer.alert('钱月英酬神还愿 冯子清误入桃园');
});
// 使用图标
$('#example-icon').find('.btn').click(function() {
layer.alert('赠金扇冯旭得意 拜天地翠秀许婚', {
icon: $(this).data('icon'),
})
});
// 询问框
$('#example-2').click(function() {
layer.confirm('游西湖林璋遇故 卖宝剑马云逢凶？', {
btn: ['重要', '奇葩'] //按钮
}, function(){
layer.msg('的确很重要', {icon: 'success'});
}, function(){
layer.msg('也可以这样', {
time: 20000, //20s后自动关闭
btn: ['明白了', '知道了']
});
});
});
// 提示层
$('#example-3').click(function() {
layer.msg('马云大闹五柳园 汤彪仗义赠金帛');
});
// 风格
$('#example-skin').find('.btn').click(function() {
layer.alert('真才子走笔成章 假斯文揉碎肚肠', {
skin: $(this).data('skin'),
});
});
// 捕获页
$('#example-4').click(function() {
layer.open({
type: 1,
shade: false,
title: false, //不显示标题
content: $('.test-example-4'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
cancel: function(){
layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon: 'success'});
}
});
});
// 页面层
$('#example-5').click(function() {
layer.open({
type: 1,
skin: 'layui-layer-rim', // 加上边框
area: ['420px', '240px'], // 宽高
content: '<div class="p-3">魏临川于中取利 花文芳将计就计</div>'
});
});
// tips层
$('#example-6').click(function() {
layer.tips('Hi，我是tips', '#example-6');
});
// iframe层
$('#example-7').click(function() {
layer.open({
type: 2,
title: 'Light Year Admin',
shadeClose: true,
shade: 0.5,
area: ['380px', '90%'],
content: 'http://lyear.itshubao.com' //iframe的url
});
});
// iframe窗
$('#example-8').click(function() {
layer.open({
type: 2,
title: false,
closeBtn: 0, //不显示关闭按钮
shade: [0],
area: ['340px', '215px'],
offset: 'rb', //右下角弹出
time: 2000, //2秒后自动关闭
anim: 2,
content: ['http://libs.itshubao.com/test.txt', 'no'], //iframe的url，no代表不显示滚动条
end: function(){ //此处用于演示
layer.open({
type: 2,
title: '很多时候，我们想最大化看，比如像这个页面。',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['893px', '600px'],
content: '//fly.layui.com/'
});
}
});
});
// 加载层
$('#example-loading').find('.btn').click(function() {
var index = layer.load($(this).data('effect'), { shade: false }); // 第一个参数为风格，支持0-2
setTimeout(function(){
layer.close(index)
}, 3000);
});
// loading层
$('#example-9').click(function() {
var index = layer.load(0, { shade: [0.1, '#000'] }); // 0.1透明度的白色背景
setTimeout(function(){
layer.close(index)
}, 3000);
});
// 小tips
$('#example-10').click(function() {
layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '#example-10', {
tips: [1, '#33cabb'],
time: 4000
});
});
// prompt层
$('#example-11').click(function() {
layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
layer.close(index);
layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
layer.close(index);
layer.msg('演示完毕！您的口令：'+ pass +'<br>您最后写下了：'+text);
});
});
});
// tab层
$('#example-12').click(function() {
layer.tab({
area: ['600px', '300px'],
tab: [{
title: '浣溪沙',
content: '<div class="p-3">一向年光有限身，<br>等闲离别易销魂。<br>酒筵歌席莫辞频。<br><br>满目山河空念远，<br>落花风雨更伤春。<br>不如怜取眼前人。</div>'
}, {
title: '清平乐·红笺小字',
content: '<div class="p-3">红笺小字，说尽平生意。<br>鸿雁在云鱼在水，惆怅此情难寄。<br><br>斜阳独倚西楼，遥山恰对帘钩。<br>人面不知何处，绿波依旧东流。</div>'
}, {
title: '玉楼春',
content: '<div class="p-3">燕鸿过后春归去。细算浮生千万绪。来如春梦几多时，去似朝云无觅处。<br>闻琴解佩神仙侣。挽断罗衣留不住。劝君莫作独醒人，烂醉花间应有数。</div>'
}]
});
});
// 相册层
$('#example-13').click(function() {
var json = {
"status": 1,
"msg": "",
"title": "JSON请求的相册",
"id": 8,
"start": 0,
"data": [{
"alt": "花", "pid": 109, "src": "//libs.itshubao.com/pic/small_007.jpg", "thumb": ""
},
{
"alt": "油菜花", "pid": 110, "src": "//libs.itshubao.com/pic/medium_003.jpg", "thumb": ""
},
{
"alt": "萌芽", "pid": 111, "src": "//libs.itshubao.com/pic/medium_004.jpg", "thumb": ""
},
{
"alt": "牵牛花", "pid": 112, "src": "//libs.itshubao.com/pic/big_005.jpg", "thumb": ""
},
{
"alt": "天鹅", "pid": 113, "src": "//libs.itshubao.com/pic/medium_001.jpg", "thumb": ""
}]
};
layer.photos({
photos: json // 格式见API文档手册页
, anim: 5 // 0-6的选择，指定弹出图片动画类型，默认随机
});
});
// 信息框
$('#example-notice').find('.btn').click(function() {
layer.msg('不开心。。。', {
icon: 'cry',
skin: $(this).data('bg')
});
});
// 提示层 - 抖动
$('#example-14').click(function() {
layer.msg('诸葛亮智算华容 关云长义释曹操', function(){
//关闭后的操作
});
});
// 自定义页面层
$('#emample-15').click(function() {
layer.open({
type: 1,
title: false,
closeBtn: 0,
shadeClose: true,
skin: 'bg-success',
content: '<div class="p-3"><h6>采桑子·时光只解催人老</h6>时光只解催人老，不信多情，长恨离亭，泪滴春衫酒易醒。<br>梧桐昨夜西风急，淡月胧明，好梦频惊，何处高楼雁一声？</div>'
});
});
// tips层位置
$('#example-top').click(function() {
layer.tips('上', $(this), {
tips: [1, '#000']
});
});
$('#example-right').click(function() {
layer.tips('默认就是向右的', $(this));
});
$('#example-bottom').click(function() {
layer.tips('下', $(this), {
tips: 3
});
});
$('#example-left').click(function() {
layer.tips('在很久以前……', $(this), {
tips: [4, '#33cabb'],
time: 300000
});
});
$('#example-more').click(function() {
layer.tips('不会销毁之前的', $(this), {tipsMore: true});
});
// 弹出位置
$('#example-position').find('.btn').click(function() {
var type = $(this).data('position'),
text = $(this).text();
layer.open({
type: 1
,offset: $(this).data('position') //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
,id: 'LAY_demo'+type //防止重复弹出
,content: '<div style="padding: 20px 100px;">'+ text +'</div>'
,btn: '关闭全部'
,btnAlign: 'c'
,shade: 0
,yes: function(){
layer.closeAll();
}
});
});
});