layer 弹出层组件

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

文档手册 功能示例 layer 移动版
下载 layer 组件 当前版本:3.5.1,
弹层之术
在线调试 扩展皮肤

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

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

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

先睹为快

上述示例对应代码code

  1. 特别说明:
  2. 事件需自己绑定,以下只展现调用代码。
  3. //初体验

  4. layer.alert('内容')
  5. //扩展皮肤

  6. layer.alert('内容', {
  7. icon: 1,
  8. skin: 'layer-ext-demo' //见:扩展说明
  9. })
  10. //询问框

  11. layer.confirm('您是如何看待前端开发?', {
  12. btn: ['重要','奇葩'] //按钮
  13. }, function(){
  14. layer.msg('的确很重要', {icon: 1});
  15. }, function(){
  16. layer.msg('也可以这样', {
  17. time: 20000, //20s后自动关闭
  18. btn: ['明白了', '知道了']
  19. });
  20. });
  21. //提示层

  22. layer.msg('一段提示信息');
  23. //墨绿深蓝风

  24. layer.alert('墨绿风格,点击确认看深蓝', {
  25. skin: 'layui-layer-molv' //样式类名
  26. ,closeBtn: 0
  27. }, function(){
  28. layer.alert('偶吧深蓝style', {
  29. skin: 'layui-layer-lan'
  30. ,closeBtn: 0
  31. ,anim: 4 //动画类型
  32. });
  33. });
  34. //捕获页

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

  45. layer.open({
  46. type: 1,
  47. skin: 'layui-layer-rim', //加上边框
  48. area: ['420px', '240px'], //宽高
  49. content: 'html内容'
  50. });
  51. //自定页

  52. layer.open({
  53. type: 1,
  54. skin: 'layui-layer-demo', //样式类名
  55. closeBtn: 0, //不显示关闭按钮
  56. anim: 2,
  57. shadeClose: true, //开启遮罩关闭
  58. content: '内容'
  59. });
  60. //tips层

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

  63. layer.open({
  64. type: 2,
  65. title: 'layer mobile页',
  66. shadeClose: true,
  67. shade: 0.8,
  68. area: ['380px', '90%'],
  69. content: 'mobile/' //iframe的url
  70. });
  71. //iframe 层

  72. layer.open({
  73. type: 2,
  74. title: '很多时候,我们想最大化看,比如像这个页面。',
  75. shadeClose: true,
  76. shade: false,
  77. maxmin: true, //开启最大化最小化按钮
  78. area: ['893px', '600px'],
  79. content: 'https://6sjs.com'
  80. });
  81. //加载层

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

  84. var index = layer.load(1, {
  85. shade: [0.1,'#fff'] //0.1透明度的白色背景
  86. });
  87. //小tips

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

  93. layer.prompt({title: '输入任何口令,并确认', formType: 1}, function(pass, index){
  94. layer.close(index);
  95. layer.prompt({title: '随便写点啥,并确认', formType: 2}, function(text, index){
  96. layer.close(index);
  97. layer.msg('演示完毕!您的口令:'+ pass +'<br>您最后写下了:'+text);
  98. });
  99. });
  100. //tab层

  101. layer.tab({
  102. area: ['600px', '300px'],
  103. tab: [{
  104. title: 'TAB1',
  105. content: '内容1'
  106. }, {
  107. title: 'TAB2',
  108. content: '内容2'
  109. }, {
  110. title: 'TAB3',
  111. content: '内容3'
  112. }]
  113. });
  114. //相册层

  115. $.getJSON('test/photos.json?v='+new Date, function(json){
  116. layer.photos({
  117. photos: json //格式见API文档手册页
  118. ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机
  119. });
  120. });
  121. //显示自动关闭倒计秒数

  122. layer.alert('在标题栏显示自动关闭倒计秒数', {
  123. time: 5*1000
  124. ,success: function(layero, index){
  125. var timeNum = this.time/1000, setText = function(start){
  126. layer.title((start ? timeNum : --timeNum) + ' 秒后关闭', index);
  127. };
  128. setText(!0);
  129. this.timer = setInterval(setText, 1000);
  130. if(timeNum <= 0) clearInterval(this.timer);
  131. }
  132. ,end: function(){
  133. clearInterval(this.timer);
  134. }
  135. });
再试牛刀

对应配置code

  1. //信息框-例1

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

  4. layer.msg('你确定你很帅么?', {
  5. time: 0 //不自动关闭
  6. ,btn: ['必须啊', '丑到爆']
  7. ,yes: function(index){
  8. layer.close(index);
  9. layer.msg('雅蠛蝶 O.o', {
  10. icon: 6
  11. ,btn: ['嗷','嗷','嗷']
  12. });
  13. }
  14. });
  15. //信息框-例3

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

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

  20. layer.msg('玩命卖萌中', function(){
  21. //关闭后的操作
  22. });
  23. //页面层-自定义

  24. layer.open({
  25. type: 1,
  26. title: false,
  27. closeBtn: 0,
  28. shadeClose: true,
  29. skin: 'yourclass',
  30. content: '自定义HTML内容'
  31. });
  32. //页面层-图片

  33. layer.open({
  34. type: 1,
  35. title: false,
  36. closeBtn: 0,
  37. area: ['auto'],
  38. skin: 'layui-layer-nobg', //没有背景色
  39. shadeClose: true,
  40. content: $('#tong')
  41. });
  42. //iframe层-父子操作

  43. layer.open({
  44. type: 2,
  45. area: ['700px', '450px'],
  46. fixed: false, //不固定
  47. maxmin: true,
  48. content: 'https://6sjs.com'
  49. });
  50. //iframe层-多媒体

  51. layer.open({
  52. type: 2,
  53. title: false,
  54. area: ['630px', '360px'],
  55. shade: 0.8,
  56. closeBtn: 0,
  57. shadeClose: true,
  58. content: '//player.youku.com/embed/XMzI1NjQyMzkwNA=='
  59. });
  60. layer.msg('点击任意处关闭');
  61. //iframe层-禁滚动条

  62. layer.open({
  63. type: 2,
  64. area: ['360px', '500px'],
  65. skin: 'layui-layer-rim', //加上边框
  66. content: ['mobile/', 'no']
  67. });
  68. //加载层-默认风格

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

  75. layer.load(1);
  76. //此处演示关闭
  77. setTimeout(function(){
  78. layer.closeAll('loading');
  79. }, 2000);
  80. //加载层-风格3

  81. layer.load(2);
  82. //此处演示关闭
  83. setTimeout(function(){
  84. layer.closeAll('loading');
  85. }, 2000);
  86. //加载层-风格4

  87. layer.msg('加载中', {
  88. icon: 16
  89. ,shade: 0.01
  90. });
  91. //打酱油

  92. layer.msg('尼玛,打个酱油', {icon: 4});
  93. //tips层-上

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

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

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

  104. layer.tips('左边么么哒', '#id或者.class', {
  105. tips: [4, '#78BA32']
  106. });
  107. //tips层-不销毁之前的

  108. layer.tips('不销毁之前的', '#id或者.class', {
  109. tipsMore: true
  110. });
  111. //默认prompt

  112. layer.prompt(function(val, index){
  113. layer.msg('得到了'+val);
  114. layer.close(index);
  115. });
  116. //屏蔽浏览器滚动条

  117. layer.open({
  118. content: '浏览器滚动条已锁',
  119. scrollbar: false
  120. });
  121. //弹出即全屏

  122. var index = layer.open({
  123. type: 2,
  124. content: 'https://6sjs.com',
  125. area: ['320px', '195px'],
  126. maxmin: true
  127. });
  128. layer.full(index);
  129. //正上方

  130. layer.msg('灵活运用offset', {
  131. offset: 't',
  132. anim: 6
  133. });
  134. //更多例子
  135. layer.msg('Hi');
美妙之旅
事实上 layer 提供的丰富的基础属性,已经足够让你的弹出框/层变得千变万化,请恕我们无法为您逐一演示。如果您仍觉得文档和代码有不当之处,迫切地希望您能反馈,你可以通各种方式进入 layer 的圈子,许多和你一样的小伙伴将会和你一起,经历这段美妙的开发旅程。