panel/public/res/views/component/layer/theme.html

<title>layer 组件风格定制</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>组件</cite></a>
        <a href="http://www.baidu.com/" target="_blank">layer</a>
        <a><cite>风格定制</cite></a>
    </div>
</div>

<style>
    /* 这段样式只是用于演示 */
    #LAY-component-layer-theme .layui-card-body {
        padding-top: 15px;
    }
</style>

<div class="layui-fluid" id="LAY-component-layer-theme">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">Windows 10 风格</div>
                <div class="layui-card-body">
                    <div class="layui-btn-container">
                        <button type="button" class="layui-btn layui-btn-primary" lay-on="test-skin-win10">
                            Windows 10 风格信息框 <span class="layui-badge-dot"></span>
                        </button>
                        <button type="button" class="layui-btn layui-btn-primary" lay-on="test-skin-win10-page">
                            Win10 风格页面层 <span class="layui-badge-dot"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">风格定制</div>
                <div class="layui-card-body">
                    <div class="layui-btn-container layadmin-layer-demo">
                        <button data-type="test1" class="layui-btn layui-btn-primary">layuiAdmin 风格</button>
                        <button data-type="test2" class="layui-btn layui-btn-primary">右侧呼出</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
  layui.use(['admin'], function () {
    var $ = layui.$
    var admin = layui.admin
    var element = layui.element
    var util = layui.util
    var router = layui.router()

    element.render()

    var active = {
      test1: function () {
        admin.popup({
          title: 'layuiAdmin'
          , shade: 0
          , anim: -1
          , area: ['280px', '150px']
          , id: 'layadmin-layer-skin-test'
          , skin: 'layui-anim layui-anim-upbit'
          , content: '内容'
        })
      }
      , test2: function () {
        admin.popupRight({
          id: 'LAY_adminPopupLayerTest'
          , success: function () {
            $('#' + this.id).html('<div style="padding: 20px;">放入内容</div>')
            //admin.view(this.id).render('system/xxx')
          }
        })
      }
    }

    $('#LAY-component-layer-theme .layadmin-layer-demo .layui-btn').on('click', function () {
      var type = $(this).data('type')
      active[type] && active[type].call(this)
    })

    // util 事件
    util.on('lay-on', {
      'test-skin-win10': function () {
        layer.alert('Windows 10 风格主题', {
          skin: 'layui-layer-win10', // 2.8+
          shade: 0.01,
          btn: ['确定', '取消']
        })
      },
      'test-skin-win10-page': function () {
        // 此处以一个简单的 Win10 风格记事本为例
        layer.open({
          type: 1, // 页面层类型
          skin: 'layui-layer-win10', // 2.8+
          shade: 0.01,
          area: ['50%', '60%'],
          maxmin: true,
          title: '*无标题 - 记事本',
          content: [
            '<div style="padding: 0 8px; height: 20px; line-height: 20px; border-bottom: 1px solid #F0F0F0; box-sizing: border-box; font-size: 12px;">',
            // 自定义菜单，此处仅作样式演示，具体功能可自主实现
            [
              '<a href="javascript:;">文件(F)</a>',
              '<a href="javascript:;" >编辑(E)</a> ',
              '<a href="javascript:;" >格式(O)</a> ',
              '<a href="javascript:;" >查看(V)</a> ',
              '<a href="javascript:;" >帮助(H)</a> ',
            ].join('   '),
            '</div>',
            '<textarea style="position: absolute; top: 20px; width: 100%; height: calc(100% - 20px); padding: 6px; border: none; resize: none; overflow-y: scroll; box-sizing: border-box;"></textarea>'
          ].join('')
        })
      }
    })
  })
</script>