文档手册 功能示例 快速上手 layer 移动版
立即运行
总大小：45KB，下载数：816818
弹层之美
在线调试 扩展皮肤

layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。

在与同类组件的比较中，layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，正因如此，越来越多的开发者将媚眼投上了layer（已被11444860人次关注）。layer 甚至兼容了包括 IE6 在内的所有主流浏览器。她数量可观的接口，使得您可以自定义太多您需要的风格，每一种弹层模式各具特色，广受欢迎。当然，这种“王婆卖瓜”的陈述听起来总是有点难受，因此你需要进一步了解她是否真的如你所愿。

layer 采用 MIT 开源许可证，将会永久性提供无偿服务。因着数年的坚持维护，截至到2017年9月13日，已运用在超过 30万 家 Web 平台，其中不乏众多知名大型网站。目前 layer 已经成为国内乃至全世界最多人使用的 Web 弹层解决方案，并且她仍在与 Layui 一并高速发展。Fly

先睹为快 
上述示例对应代码layui.code
  1. 特别说明：事件需自己绑定，以下只展现调用代码。
  2. //初体验
  3. layer.alert('内容')
  4. //第三方扩展皮肤
  5. layer.alert('内容', {
  6.   icon: 1,
  7.   skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
  8. })
  9. //询问框
  10. layer.confirm('您是如何看待前端开发？', {
  11.   btn: ['重要','奇葩'] //按钮
  12. }, function(){
  13.   layer.msg('的确很重要', {icon: 1});
  14. }, function(){
  15.   layer.msg('也可以这样', {
  16.     time: 20000, //20s后自动关闭
  17.     btn: ['明白了', '知道了']
  18.   });
  19. });
  20. //提示层
  21. layer.msg('玩命提示中');
  22. //墨绿深蓝风
  23. layer.alert('墨绿风格，点击确认看深蓝', {
  24.   skin: 'layui-layer-molv' //样式类名
  25.   ,closeBtn: 0
  26. }, function(){
  27.   layer.alert('偶吧深蓝style', {
  28.     skin: 'layui-layer-lan'
  29.     ,closeBtn: 0
  30.     ,anim: 4 //动画类型
  31.   });
  32. });
  33. //捕获页
  34. layer.open({
  35.   type: 1,
  36.   shade: false,
  37.   title: false, //不显示标题
  38.   content: $('.layer_notice'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
  39.   cancel: function(){
  40.     layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
  41.   }
  42. });
  43. //页面层
  44. layer.open({
  45.   type: 1,
  46.   skin: 'layui-layer-rim', //加上边框
  47.   area: ['420px', '240px'], //宽高
  48.   content: 'html内容'
  49. });
  50. //自定页
  51. layer.open({
  52.   type: 1,
  53.   skin: 'layui-layer-demo', //样式类名
  54.   closeBtn: 0, //不显示关闭按钮
  55.   anim: 2,
  56.   shadeClose: true, //开启遮罩关闭
  57.   content: '内容'
  58. });
  59. //tips层
  60. layer.tips('Hi，我是tips', '吸附元素选择器，如#id');
  61. //iframe层
  62. layer.open({
  63.   type: 2,
  64.   title: 'layer mobile页',
  65.   shadeClose: true,
  66.   shade: 0.8,
  67.   area: ['380px', '90%'],
  68.   content: 'mobile/' //iframe的url
  69. }); 
  70. //iframe窗
  71. layer.open({
  72.   type: 2,
  73.   title: false,
  74.   closeBtn: 0, //不显示关闭按钮
  75.   shade: [0],
  76.   area: ['340px', '215px'],
  77.   offset: 'rb', //右下角弹出
  78.   time: 2000, //2秒后自动关闭
  79.   anim: 2,
  80.   content: ['test/guodu.html', 'no'], //iframe的url，no代表不显示滚动条
  81.   end: function(){ //此处用于演示
  82.     layer.open({
  83.       type: 2,
  84.       title: '很多时候，我们想最大化看，比如像这个页面。',
  85.       shadeClose: true,
  86.       shade: false,
  87.       maxmin: true, //开启最大化最小化按钮
  88.       area: ['893px', '600px'],
  89.       content: '//fly.layui.com/'
  90.     });
  91.   }
  92. });
  93. //加载层
  94. var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
  95. //loading层
  96. var index = layer.load(1, {
  97.   shade: [0.1,'#fff'] //0.1透明度的白色背景
  98. });
  99. //小tips
  100. layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', {
  101.   tips: [1, '#3595CC'],
  102.   time: 4000
  103. });
  104. //prompt层
  105. layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
  106.   layer.close(index);
  107.   layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
  108.     layer.close(index);
  109.     layer.msg('演示完毕！您的口令：'+ pass +'<br>您最后写下了：'+text);
  110.   });
  111. });
  112. //tab层
  113. layer.tab({
  114.   area: ['600px', '300px'],
  115.   tab: [{
  116.     title: 'TAB1', 
  117.     content: '内容1'
  118.   }, {
  119.     title: 'TAB2', 
  120.     content: '内容2'
  121.   }, {
  122.     title: 'TAB3', 
  123.     content: '内容3'
  124.   }]
  125. });
  126. //相册层
  127. $.getJSON('test/photos.json?v='+new Date, function(json){
  128.   layer.photos({
  129.     photos: json //格式见API文档手册页
  130.     ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
  131.   });
  132. });
  133.
再试牛刀 
对应配置layui.code
  1. //信息框-例1
  2. layer.alert('见到你真的很高兴', {icon: 6});
  3.  
  4. //信息框-例2
  5. layer.msg('你确定你很帅么？', {
  6.   time: 0 //不自动关闭
  7.   ,btn: ['必须啊', '丑到爆']
  8.   ,yes: function(index){
  9.     layer.close(index);
  10.     layer.msg('雅蠛蝶 O.o', {
  11.       icon: 6
  12.       ,btn: ['嗷','嗷','嗷']
  13.     });
  14.   }
  15. });
  16. //信息框-例3
  17. layer.msg('这是最常用的吧');
  18. //信息框-例4
  19. layer.msg('不开心。。', {icon: 5});
  20. //信息框-例5
  21. layer.msg('玩命卖萌中', function(){
  22. //关闭后的操作
  23. });
  24. //页面层-自定义
  25. layer.open({
  26.   type: 1,
  27.   title: false,
  28.   closeBtn: 0,
  29.   shadeClose: true,
  30.   skin: 'yourclass',
  31.   content: '自定义HTML内容'
  32. });
  33. //页面层-图片
  34. layer.open({
  35.   type: 1,
  36.   title: false,
  37.   closeBtn: 0,
  38.   area: ['auto'],
  39.   skin: 'layui-layer-nobg', //没有背景色
  40.   shadeClose: true,
  41.   content: $('#tong')
  42. });
  43. //iframe层-父子操作
  44. layer.open({
  45.   type: 2,
  46.   area: ['700px', '450px'],
  47.   fixed: false, //不固定
  48.   maxmin: true,
  49.   content: 'test/iframe.html'
  50. });
  51. //iframe层-多媒体
  52. layer.open({
  53.   type: 2,
  54.   title: false,
  55.   area: ['630px', '360px'],
  56.   shade: 0.8,
  57.   closeBtn: 0,
  58.   shadeClose: true,
  59.   content: '//player.youku.com/embed/XMjY3MzgzODg0'
  60. });
  61. layer.msg('点击任意处关闭');
  62. //iframe层-禁滚动条
  63. layer.open({
  64.   type: 2,
  65.   area: ['360px', '500px'],
  66.   skin: 'layui-layer-rim', //加上边框
  67.   content: ['mobile/', 'no']
  68. });
  69. //加载层-默认风格
  70. layer.load();
  71. //此处演示关闭
  72. setTimeout(function(){
  73.   layer.closeAll('loading');
  74. }, 2000);
  75. //加载层-风格2
  76. layer.load(1);
  77. //此处演示关闭
  78. setTimeout(function(){
  79.   layer.closeAll('loading');
  80. }, 2000);
  81. //加载层-风格3
  82. layer.load(2);
  83. //此处演示关闭
  84. setTimeout(function(){
  85.   layer.closeAll('loading');
  86. }, 2000);
  87. //加载层-风格4
  88. layer.msg('加载中', {
  89.   icon: 16
  90.   ,shade: 0.01
  91. });
  92. //打酱油
  93. layer.msg('尼玛，打个酱油', {icon: 4});
  94. //tips层-上
  95. layer.tips('上', '#id或者.class', {
  96.   tips: [1, '#0FA6D8'] //还可配置颜色
  97. });
  98. //tips层-右
  99. layer.tips('默认就是向右的', '#id或者.class');
  100. //tips层-下
  101. layer.tips('下', '#id或者.class', {
  102.   tips: 3
  103. });
  104. //tips层-左
  105. layer.tips('左边么么哒', '#id或者.class', {
  106.   tips: [4, '#78BA32']
  107. });
  108. //tips层-不销毁之前的
  109. layer.tips('不销毁之前的', '#id或者.class', {
  110.   tipsMore: true
  111. });
  112. //默认prompt
  113. layer.prompt(function(val, index){
  114.   layer.msg('得到了'+val);
  115.   layer.close(index);
  116. });
  117. //屏蔽浏览器滚动条
  118. layer.open({
  119.   content: '浏览器滚动条已锁',
  120.   scrollbar: false
  121. });
  122. //弹出即全屏
  123. var index = layer.open({
  124.   type: 2,
  125.   content: 'http://layim.layui.com',
  126.   area: ['320px', '195px'],
  127.   maxmin: true
  128. });
  129. layer.full(index);
  130. //正上方
  131. layer.msg('灵活运用offset', {
  132.   offset: 't',
  133.   anim: 6
  134. });
  135. //更多例子 
  136. layer.msg('Hi');
  137.