layer 1.9.2 发布，国产 Web 弹层不懈的前行者

一些唠叨

在线调试 快速上手 扩展皮肤 前往旧版1.8.5
layer是一款口碑极佳的web弹层组件，她具备全方位的解决方案，致力于服务各个水平段的开发人员，您的页面会轻松地拥有丰富而友好的操作体验。

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

layer遵循LGPL协议，将永久性提供无偿服务。历经三年，截至到2015年4月19日，已运用在10万余家web平台，其中包括中国联通、蚂蚁短租、慕课网、phpyun等等知名网站，如果您有大型项目也在使用layer，您可以联系作者，以便在此展现案例，也为您的品牌推广尽一些绵薄之力。Say

一睹为快

点击以下各方框查看效果：

初体验第三方扩展皮肤询问层提示层墨绿深蓝风捕获页页面层自定页tips层iframe层iframe窗加载层loading层小tipsprompt层tab层相册层

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

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

//第三方扩展皮肤 layer.alert('内容', { icon: 1, skin: 'layer-ext-seaning' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，可以去API页查看 })

//询问框 layer.confirm('您是如何看待前端开发？', { btn: ['重要','奇葩'], //按钮 shade: false //不显示遮罩 }, function(){ layer.msg('的确很重要', {icon: 1}); }, function(){ layer.msg('奇葩么么哒', {shift: 6}); });

//提示层 layer.msg('玩命提示中');

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

//捕获页 layer.open({ type: 1, shade: false, title: false, //不显示标题 content: $('.layer_notice'), //捕获的元素 cancel: function(index){ layer.close(index); this.content.show(); layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构',{time: 5000}); } });

//页面层 layer.open({ type: 1, area: ['420px', '240px'], //宽高 content: 'html内容' });

//自定页 layer.open({ type: 1, skin: 'layui-layer-demo', //样式类名 closeBtn: false, //不显示关闭按钮 shift: 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', '450px'], content: 'http://layer.layui.com/mobile/' //iframe的url });

//iframe窗 layer.open({ type: 2, title: false, closeBtn: false, shade: [0], area: ['340px', '215px'], offset: 'rb', //右下角弹出 time: 2000, //2秒后自动关闭 shift: 2, content: ['test/guodu.html', 'no'], //iframe的url，no代表不显示滚动条 end: function(){ //此处用于演示 layer.open({ type: 2, title: '很多时候，我们想最大化看，比如像这个页面。', shadeClose: true, shade: false, maxmin: true, //开启最大化最小化按钮 area: ['640px', '450px'], content: 'http://www.layui.com?form=yidu' }); } });

//加载层 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 //prompt风格，支持0-2 }, function(pass){ layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text){ layer.msg('演示完毕！您的口令：'+ pass +' 您最后写下了：'+ 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文档手册页 }); });

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

上述示例对应代码laycode - v1.1

一往而深

layer历经三年考验，已经清楚地懂得了人们最需要的是什么，因此这一版的核心是做减法，不仅剔除了部分冗余的API，对包括layer.ext.js在内的代码也进行了大量瘦身（所以请不要覆盖升级），layer.js相比1.8.5减少了将近300行代码，但是这并不意味着功能的削减，事实上，layer已经变得更强大！1.9的使命是告诉大家，选择layer是完全正确的，没有哪个类似组件会如此玩命地维护和改进。应当有理由相信，layer1.9是一个里程碑式的跨进！

那么，我们将再演示一些例子，其中的大部分你可能都在一睹为快已经体验了。我们所呈现的例子毕竟有限，因此更推荐您直接阅读API文档。

信息框
例1例2例3例4例5

页面层/iframe层
页面层-自定义页面层-佟丽娅iframe-子父操作iframe-多媒体iframe-禁滚动条

加载层
默认风格2风格3风格4打酱油

tips层
上右下左允许多个

其它演示
默认prompt屏蔽浏览器滚动条弹出即全屏正上方还该列举什么呢

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

//信息框-例2 layer.confirm('你确定你很帅么？', {icon: 3}, function(index){ layer.close(index); alert('自恋狂'); });

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

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

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

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

//页面层-佟丽娅 layer.open({ type: 1, title: false, closeBtn: false, area: ['516px', '620px'], skin: 'layui-layer-nobg', //没有背景色 shadeClose: true, content: $('#tong') });

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

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

//iframe层-禁滚动条 layer.open({ type: 2, area: ['360px', '500px'], content: ['http://sentsin.com', '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});

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

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

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

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

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

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

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

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

//弹出即全屏 var index = layer.open({ type: 2, content: 'http://www.layui.com?form=full', area: ['300px', '195px'], maxmin: true }); layer.full(index);

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

//还该列举什么呢 layer.msg('等我想想…');

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

对应代码说明laycode - v1.1

一劳永逸

事实上layer提供的丰富的接口支撑，已经足够让你的弹层变得千变万化，请恕我无法为您逐一演示。真心希望layer可以帮助你在某些方面变得一劳永逸。如果您觉得文档和代码有不当之处，迫切地希望您能反馈，你可以通过SAY社区和加群的方式进入layer的圈子，许多和你一样的小伙伴将会和你一起，走过这段美妙的旅程。与此同时，个人的力量始终有限，layer也非常需要更多的你来共同完善她！

Layui强力驱动