Light-Year-Example
/
test_layer_v4.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="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>
          <blockquote>弹窗动画完成后，谷歌浏览器下有一个hover的bug，鼠标移到最后一个按钮时，字有1px的移动。</blockquote>

          <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>&lt;p id="example-icon"&gt;
  &lt;button class="btn btn-primary" data-icon="success"&gt;正确&lt;/button&gt;
  &lt;button class="btn btn-danger" data-icon="error"&gt;错误&lt;/button&gt;
  &lt;button class="btn btn-yellow" data-icon="doubt"&gt;疑问&lt;/button&gt;
  &lt;button class="btn btn-secondary" data-icon="lock"&gt;锁定&lt;/button&gt;
  &lt;button class="btn btn-pink" data-icon="cry"&gt;哭脸&lt;/button&gt;
  &lt;button class="btn btn-success" data-icon="smile"&gt;笑脸&lt;/button&gt;
  &lt;button class="btn btn-warning" data-icon="warning"&gt;警告&lt;/button&gt;
&lt;/p&gt;

// 使用图标
$('#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>&lt;div id="example-skin"&gt;
  &lt;button class="btn btn-primary" data-skin="lyear-skin-primary"&gt;主色&lt;/button&gt;
  &lt;button class="btn btn-success" data-skin="lyear-skin-success"&gt;成功&lt;/button&gt;
  &lt;button class="btn btn-info" data-skin="lyear-skin-info"&gt;信息&lt;/button&gt;
  &lt;button class="btn btn-warning" data-skin="lyear-skin-warning"&gt;警告&lt;/button&gt;
  &lt;button class="btn btn-danger" data-skin="lyear-skin-danger"&gt;错误&lt;/button&gt;
  &lt;button class="btn btn-secondary" data-skin="lyear-skin-secondary"&gt;灰色&lt;/button&gt;
  &lt;button class="btn btn-purple" data-skin="lyear-skin-purple"&gt;紫色&lt;/button&gt;
  &lt;button class="btn btn-pink" data-skin="lyear-skin-pink"&gt;粉红&lt;/button&gt;
  &lt;button class="btn btn-cyan" data-skin="lyear-skin-cyan"&gt;青色&lt;/button&gt;
  &lt;button class="btn btn-yellow" data-skin="lyear-skin-yellow"&gt;黄色&lt;/button&gt;
  &lt;button class="btn btn-brown" data-skin="lyear-skin-brown"&gt;棕色&lt;/button&gt;
  &lt;button class="btn btn-dark" data-skin="lyear-skin-dark"&gt;黑色&lt;/button&gt;
&lt;/div&gt;

// 风格
$('#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-15 m-b-0">
                <li>第06回　姚夏封广陵风鉴　常万青南海朝山</li>
                <li>第07回　朱翰林代为月老　冯子清聘定月英</li>
                <li>第08回　魏家妇人前卖俏　花文芳黑夜偷情</li>
              </ul>
            </div>
            <button class="btn btn-default" id="example-4">捕获页</button>
          </div>
          <pre>&lt;div class="test-example-4"&gt;
  &lt;ul class="list-unstyled p-15 m-b-0"&gt;
    &lt;li&gt;第06回　姚夏封广陵风鉴　常万青南海朝山&lt;/li&gt;
    &lt;li&gt;第07回　朱翰林代为月老　冯子清聘定月英&lt;/li&gt;
    &lt;li&gt;第08回　魏家妇人前卖俏　花文芳黑夜偷情&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
&lt;button class="btn btn-default" id="example-4"&gt;捕获页&lt;/button&gt;

// 捕获页
$('#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: '&lt;div class="p-15"&gt;魏临川于中取利　花文芳将计就计&lt;/div&gt;'
    });
});</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 +'&lt;br&gt;您最后写下了：'+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>&lt;div id="example-notice"&gt;
  &lt;button class="btn btn-default"&gt;默认&lt;/button&gt;
  &lt;button class="btn btn-primary" data-bg="bg-primary"&gt;主色&lt;/button&gt;
  &lt;button class="btn btn-success" data-bg="bg-success"&gt;成功&lt;/button&gt;
  &lt;button class="btn btn-info" data-bg="bg-info"&gt;信息&lt;/button&gt;
  &lt;button class="btn btn-warning" data-bg="bg-warning"&gt;警告&lt;/button&gt;
  &lt;button class="btn btn-danger" data-bg="bg-danger"&gt;错误&lt;/button&gt;
  &lt;button class="btn btn-secondary" data-bg="bg-secondary"&gt;灰色&lt;/button&gt;
  &lt;button class="btn btn-purple" data-bg="bg-purple"&gt;紫色&lt;/button&gt;
  &lt;button class="btn btn-pink" data-bg="bg-pink"&gt;粉红&lt;/button&gt;
  &lt;button class="btn btn-cyan" data-bg="bg-cyan"&gt;青色&lt;/button&gt;
  &lt;button class="btn btn-yellow" data-bg="bg-yellow"&gt;黄色&lt;/button&gt;
  &lt;button class="btn btn-brown" data-bg="bg-brown"&gt;棕色&lt;/button&gt;
  &lt;button class="btn btn-dark" data-bg="bg-dark"&gt;黑色&lt;/button&gt;
&lt;/div&gt;

// 信息框
$('#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: '&lt;div class="p-15"&gt;&lt;h6&gt;采桑子·时光只解催人老&lt;/h6&gt;时光只解催人老，不信多情，长恨离亭，泪滴春衫酒易醒。&lt;br&gt;梧桐昨夜西风急，淡月胧明，好梦频惊，何处高楼雁一声？&lt;/div&gt;'
});</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>$('#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});
});</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>$('#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();
        }
    });
});</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="js/layer/layer.min.js"></script>
<script type="text/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-15">魏临川于中取利　花文芳将计就计</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: ['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/'
                });
            }
        });
    });

    // 加载层
    $('#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-15">一向年光有限身，<br>等闲离别易销魂。<br>酒筵歌席莫辞频。<br><br>满目山河空念远，<br>落花风雨更伤春。<br>不如怜取眼前人。</div>'
            }, {
               title: '清平乐·红笺小字',
                content: '<div class="p-15">红笺小字，说尽平生意。<br>鸿雁在云鱼在水，惆怅此情难寄。<br><br>斜阳独倚西楼，遥山恰对帘钩。<br>人面不知何处，绿波依旧东流。</div>'
            }, {
                title: '玉楼春',
                content: '<div class="p-15">燕鸿过后春归去。细算浮生千万绪。来如春梦几多时，去似朝云无觅处。<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": "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的选择，指定弹出图片动画类型，默认随机
        });
    });

    // 信息框
    $('#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-15"><h5>采桑子·时光只解催人老</h5>时光只解催人老，不信多情，长恨离亭，泪滴春衫酒易醒。<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();
            }
        });
    });
});
</script>
</body>
</html>