# layer 弹出层组件

用于实现网页中的各种弹出层交互，如 Alert/Confirm/Message/Tips/Page/Iframe/Loading/Prompt/Tab/photo 应有尽有

//在这里面输入任何合法的js语句 layer.open({ type: 1 //Page层类型 ,area: ['500px', '300px'] ,title: 'Hello layer' ,shade: 0.6 //遮罩透明度 ,maxmin: true //允许全屏最小化 ,anim: 1 //0-6的动画形式，-1不开启 ,content: '<div style="padding:50px;">这是一个非常普通的页面层，传入了自定义的 html</div>' }); 立即运行

- 1. layer 系列常见问题的处理和相关实用干货集锦
- 2. layer 所有版本完整更新日志
- 3. 关注 layui 微信公众号，随时随地获取最新动态

- Github Gitee NPM

下载 layer 组件 当前版本：
，下载数：loading…
弹层之术
在线调试 扩展皮肤

layer 是一款历年来备受青睐的 Web 弹出层组件，具备全方位的解决方案，面向各个水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。

在与同类组件的比较中，layer 会更能被开发者所选择。这不仅是凭「脸」取胜，而是它尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，layer 甚至还兼容了包括 IE6 在内的所有主流浏览器。其数量可观的基础属性和方法，使得您可以自定义太多您需要的风格，每一种弹层模式各具特色，广受欢迎。当然，这种「王婆卖瓜」的陈述听起来总是有点难受，因此你需要进一步了解她是否真的如你所愿。 layer 被浏览次数：loading…

layer 采用 MIT 开源许可证，是一个永久无偿的公益性项目。因着数年的坚持维护，已被运用在不计其数 Web 平台，已然成为网页弹出层的首先交互方案，几乎所处可见，其中还不乏众多知名大型网站。layer 已被国内乃至全世界至少数十万的开发者所使用过，并且它仍在与 Layui 开源项目一并稳步发展。

先睹为快
初体验 第三方扩展皮肤 询问层 提示层 墨绿深蓝风 捕获页 页面层 自定页 tips层 iframe层 iframe层 加载层 loading层 小tips prompt层 tab层 相册层 自动关闭 管理模板

    特别说明：
    事件需自己绑定，以下只展现调用代码。

    //初体验
    layer.alert('内容')

    //扩展皮肤
    layer.alert('内容', {
      icon: 1,
      skin: 'layer-ext-demo' //见：扩展说明
    })

    //询问框
    layer.confirm('您是如何看待前端开发？', {
      btn: ['重要','奇葩'] //按钮
    }, function(){
      layer.msg('的确很重要', {icon: 1});
    }, function(){
      layer.msg('也可以这样', {
        time: 20000, //20s后自动关闭
        btn: ['明白了', '知道了']
      });
    });

    //提示层
    layer.msg('一段提示信息');

    //墨绿深蓝风
    layer.alert('墨绿风格，点击确认看深蓝', {
      skin: 'layui-layer-molv' //样式类名
      ,closeBtn: 0
    }, function(){
      layer.alert('偶吧深蓝style', {
        skin: 'layui-layer-lan'
        ,closeBtn: 0
        ,anim: 4 //动画类型
      });
    });

    //捕获页
    layer.open({
      type: 1,
      shade: false,
      title: false, //不显示标题
      content: $('.layer_notice'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
      cancel: function(){
        layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
      }
    });

    //页面层
    layer.open({
      type: 1,
      skin: 'layui-layer-rim', //加上边框
      area: ['420px', '240px'], //宽高
      content: 'html内容'
    });

    //自定页
    layer.open({
      type: 1,
      skin: 'layui-layer-demo', //样式类名
      closeBtn: 0, //不显示关闭按钮
      anim: 2,
      shadeClose: true, //开启遮罩关闭
      content: '内容'
    });

    //tips层
    layer.tips('Hi，我是tips', '吸附元素选择器，如#id');

    //iframe 层
    layer.open({
      type: 2,
      title: 'layer mobile页',
      shadeClose: true,
      shade: 0.8,
      area: ['380px', '90%'],
      content: 'mobile/' //iframe的url
    });

    //iframe 层
    layer.open({
      type: 2,
      title: '很多时候，我们想最大化看，比如像这个页面。',
      shadeClose: true,
      shade: false,
      maxmin: true, //开启最大化最小化按钮
      area: ['893px', '600px'],
      content: 'https://www.baidu.com/'
    });

    //加载层
    var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2

    //loading层
    var index = layer.load(1, {
      shade: [0.1,'#fff'] //0.1透明度的白色背景
    });

    //小tips
    layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', {
      tips: [1, '#3595CC'],
      time: 4000
    });

    //prompt层
    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层
    layer.tab({
      area: ['600px', '300px'],
      tab: [{
        title: 'TAB1',
        content: '内容1'
      }, {
        title: 'TAB2',
        content: '内容2'
      }, {
        title: 'TAB3',
        content: '内容3'
      }]
    });

    //相册层
    $.getJSON('test/photos.json?v='+new Date, function(json){
      layer.photos({
        photos: json //格式见API文档手册页
        ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
      });
    });

    //显示自动关闭倒计秒数
    layer.alert('在标题栏显示自动关闭倒计秒数', {
      time: 5*1000
      ,success: function(layero, index){
        var timeNum = this.time/1000, setText = function(start){
          layer.title((start ? timeNum : --timeNum) + ' 秒后关闭', index);
        };
        setText(!0);
        this.timer = setInterval(setText, 1000);
        if(timeNum <= 0) clearInterval(this.timer);
      }
      ,end: function(){
        clearInterval(this.timer);
      }
    });

再试牛刀

- 信息框
  例1 例2 例3 例4 例5
- 页面层/iframe层
  页面层-自定义 页面层-图片 iframe-子父操作 iframe-多媒体 iframe-禁滚动条
- 加载层
  默认 风格2 风格3 风格4 打酱油
- tips层
  上 右 下 左 允许多个
- 其它演示
  默认prompt 屏蔽浏览器滚动条 弹出即全屏 正上方 更多例子

    //信息框-例1
    layer.alert('见到你真的很高兴', {icon: 6});

    //信息框-例2
    layer.msg('你确定你很帅么？', {
      time: 0 //不自动关闭
      ,btn: ['必须啊', '丑到爆']
      ,yes: function(index){
        layer.close(index);
        layer.msg('雅蠛蝶 O.o', {
          icon: 6
          ,btn: ['嗷','嗷','嗷']
        });
      }
    });

    //信息框-例3
    layer.msg('这是最常用的吧');

    //信息框-例4
    layer.msg('不开心。。', {icon: 5});

    //信息框-例5
    layer.msg('玩命卖萌中', function(){
    //关闭后的操作
    });

    //页面层-自定义
    layer.open({
      type: 1,
      title: false,
      closeBtn: 0,
      shadeClose: true,
      skin: 'yourclass',
      content: '自定义HTML内容'
    });

    //页面层-图片
    layer.open({
      type: 1,
      title: false,
      closeBtn: 0,
      area: ['auto'],
      skin: 'layui-layer-nobg', //没有背景色
      shadeClose: true,
      content: $('#tong')
    });

    //iframe层-父子操作
    layer.open({
      type: 2,
      area: ['700px', '450px'],
      fixed: false, //不固定
      maxmin: true,
      content: 'test/iframe.html'
    });

    //iframe层-多媒体
    layer.open({
      type: 2,
      title: false,
      area: ['630px', '360px'],
      shade: 0.8,
      closeBtn: 0,
      shadeClose: true,
      content: '//player.youku.com/embed/XMzI1NjQyMzkwNA=='
    });
    layer.msg('点击任意处关闭');

    //iframe层-禁滚动条
    layer.open({
      type: 2,
      area: ['360px', '500px'],
      skin: 'layui-layer-rim', //加上边框
      content: ['mobile/', 'no']
    });

    //加载层-默认风格
    layer.load();
    //此处演示关闭
    setTimeout(function(){
      layer.closeAll('loading');
    }, 2000);

    //加载层-风格2
    layer.load(1);
    //此处演示关闭
    setTimeout(function(){
      layer.closeAll('loading');
    }, 2000);

    //加载层-风格3
    layer.load(2);
    //此处演示关闭
    setTimeout(function(){
      layer.closeAll('loading');
    }, 2000);

    //加载层-风格4
    layer.msg('加载中', {
      icon: 16
      ,shade: 0.01
    });

    //打酱油
    layer.msg('尼玛，打个酱油', {icon: 4});

    //tips层-上
    layer.tips('上', '#id或者.class', {
      tips: [1, '#0FA6D8'] //还可配置颜色
    });

    //tips层-右
    layer.tips('默认就是向右的', '#id或者.class');

    //tips层-下
    layer.tips('下', '#id或者.class', {
      tips: 3
    });

    //tips层-左
    layer.tips('左边么么哒', '#id或者.class', {
      tips: [4, '#78BA32']
    });

    //tips层-不销毁之前的
    layer.tips('不销毁之前的', '#id或者.class', {
      tipsMore: true
    });

    //默认prompt
    layer.prompt(function(val, index){
      layer.msg('得到了'+val);
      layer.close(index);
    });

    //屏蔽浏览器滚动条
    layer.open({
      content: '浏览器滚动条已锁',
      scrollbar: false
    });

    //弹出即全屏
    var index = layer.open({
      type: 2,
      content: 'https://fly.layui.com/jump/alyhot/',
      area: ['320px', '195px'],
      maxmin: true
    });
    layer.full(index);

    //正上方
    layer.msg('灵活运用offset', {
      offset: 't',
      anim: 6
    });

    //更多例子
    layer.msg('Hi');

倘若 layer 于你有益，欢迎：

小额赞赏
美妙之旅

> 事实上 layer 提供的丰富的基础属性，已经足够让你的弹出框/层变得千变万化，请恕我们无法为您逐一演示。如果您仍觉得文档和代码有不当之处，迫切地希望您能反馈，你可以通各种方式进入 layer 的圈子，许多和你一样的小伙伴将会和你一起，经历这段美妙的开发旅程。