jQuery layer弹出层插件 http://layer.layui.com/直接上官网学

在许多网站中，经常用到弹出层，有时候为了达到更好的用户体验，你将写繁琐的css跟js，这款 jquery-layer可以让你想到即可做到的web弹窗/层js组件。layer侧重于用户灵活的自定义，为不同人的使用习惯提供全方位设计，您的页 面会因此拥有更丰富、友好的操作体验，而您只需在调用时简单地配置相关参数，即可轻松实现各类交互。

 

它的使用方法很简单，首先，引入jquery库及layer库 代码如下：

<button id="test1">小小提示层</button>
<script src="js/jquery-1.8.3.js"></script>
<script src="js/layer.min.js"></script>
<script>
    $('#test1').on('click', function () {
        //2秒后自动关闭，-1代表不显示图标
        layer.msg('Hello layer', 2, -1);
    });
</script>

 

作者：广州-yunny
除非注明，jQuery学习网文章均为原创，转载时必须以链接形式标明本文地址。
本文地址：http://www.jquery001.com/jquery-layer.html

 

 

最近做的一个项目使用了一个叫做layer.js的插件，感觉很不错，在这里写下一些使用心得。

官方下载的地址与使用文档：http://sentsin.com/jquery/layer/

因为官方的使用演示讲解的已经非常清楚了，在这里我就讲解一下就我在项目中的使用心得。

情况一：操作请求在iframe页面中，但是弹窗希望是在整个页面中居中，也就是相当于父页面中的弹窗，也就是所谓的在iframe操作父页面

方法如下：在当前的iframe页面中写JS触发效果，希望弹窗的的DIV必须放在iframe父页面中，调用代码如下

     $("#addBank").click(function(){
        var docHeight = document.documentElement.clientHeight;
        top.$.layer({
            type : 1,
            title : '添加银行账号',
            fix : true,
            zIndex : 19891014,
            offset:[(docHeight/2-240)+'px' , ''],
            area : ['auto','350px'],
            page : {dom : '#addWrapper'}
        });
    });

其中top.$.layer就是调用的关键了，top是浏览器的内置对象，表示最顶层容器,这样一来就是实现了iframe控制父页面的弹窗效果了，

"#addWrapper"是父页面中的一个div，id为"addWrapper",其他的参数官方API里面都有详细介绍，这里我就不再啰嗦了

情况二：希望弹窗自定义显示的文字的样式，我们可以在接受参数message的时候使用如："<p style='text-align:center;'>你要显示的文字</p>"的方式来实现

1. /*
2. 先去官网下载最新的js  http://sentsin.com/jquery/layer/
3. ①引用jquery
4. ②引用layer.min.js
5. */
6. 触发弹层的事件可自由绑定，如：
7. $('#id').on('click', function(){
8. layer.msg('test');
9. });
10. 下面主要贴出上述例子的调用代码：
11. 【信息框】：
12. layer.alert('白菜级别前端攻城师贤心', 8); //风格一
13. layer.msg('前端攻城师贤心'); //风格二
14. //当然，远远不止这两种风格。
15. 【询问框】：
16. $.layer({
17. shade: [0],
18. area: ['auto','auto'],
19. dialog: {
20. msg: '您是如何看待前端开发？',
21. btns: 2,
22. type: 4,
23. btn: ['重要','奇葩'],
24. yes: function(){
25. layer.msg('重要', 1, 1);
26. }, no: function(){
27. layer.msg('奇葩', 1, 13);
28. }
29. }
30. });
31. //还可用layer.confirm()快捷调用
32. 【页面层一】
33. $.layer({
34. type: 1,
35. shade: [0],
36. area: ['auto', 'auto'],
37. title: false,
38. border: [0],
39. page: {dom : '.layer_notice'}
40. });
41. 【页面层二】
42. var pageii = $.layer({
43. type: 1,
44. title: false,
45. area: ['auto', 'auto'],
46. border: [0], //去掉默认边框
47. shade: [0], //去掉遮罩
48. closeBtn: [0, false], //去掉默认关闭按钮
49. shift: 'left', //从左动画弹出
50. page: {
51. html: '<div style="width:420px; height:260px; padding:20px; border:1px solid #ccc; background- color:#eee;"><p>我从左边来，我自定了风 格。</p><button id="pagebtn" class="btns" onclick="">关闭< /button></div>'
52. }
53. });
54. //自设关闭
55. $('#pagebtn').on('click', function(){
56. layer.close(pageii);
57. });
58. 【iframe层一】
59. $.layer({
60. type: 2,
61. shadeClose: true,
62. title: false,
63. closeBtn: [0, false],
64. shade: [0.8, '#000'],
65. border: [0],
66. offset: ['20px',''],
67. area: ['1000px', ($(window).height() - 50) +'px'],
68. iframe: {src: 'http://f2e.sentsin.com/chat'}
69. });
70. 【iframe层二】
71. layer.tips('5秒后右下角窗口自动关闭，并生成一个新的iframe', this, {
72. time: 5,
73. maxWidth: 260
74. });
75. $.layer({
76. type: 2,
77. closeBtn: false,
78. shadeClose: true,
79. shade: [0.1, '#fff'],
80. border: [0],
81. time: 5,
82. iframe: {
83. src: 'test/guodu.html'
84. },
85. title: false,
86. area: ['300px','250px'],
87. shift: 'right-bottom',
88. end: function(){
89. $.layer({
90. type : 2,
91. title: '贤心博客 - sentsin.com',
92. shadeClose: true,
93. maxmin: true,
94. fix : false,
95. area: ['1024px', 500],
96. iframe: {
97. src : 'http://sentsin.com/'
98. }
99. });
100. }
101. });
102. 【加载层一】
103. layer.load(3);
104. 【加载层二】
105. layer.load('加载带文字', 3);
106. 【tips层一】
107. layer.tips('tips的样式并非是固定的，您可自定义外观。', this, {
108. style: ['background-color:#78BA32; color:#fff', '#78BA32'],
109. maxWidth:185,
110. time: 3,
111. closeBtn:[0, true]
112. });
113. 【tips层二】
114. layer.tips('默认没有关闭按钮', this , {guide: 1, time: 2});
115. 【输入/文件层】
116. //普通文本
117. layer.prompt({title: '您的名字？'}, function(name){
118. alert(name);
119. });
120. //密码文本
121. layer.prompt({title: '输入任何口令，并确认',type: 1}, function(pass){
122. alert(pass);
123. });
124. //文件上传
125. layer.prompt({title: '随便上传个东东，并确认',type: 2}, function(file){
126. alert(file);
127. });
128. //多行文本
129. layer.prompt({title: '随便写点啥，并确认',type: 3}, function(val){
130. alert(val);
131. });
132. 【tab层】
133. layer.tab({
134. area: ['1000px', '500px'],
135. data: [
136. {title: 'Say', content:'Hi，Main'},
137. {title: '无题', content:'支持html传入'}
138. ]
139. });
140. 【相册层】
141. //此处为异步请求模式，具体的json格式，请等待文档更新。或者你直接通过请求看photos.json
142. var conf = {};
143. $.getJSON('ajax地址', {}, function(json){
144. conf.photoJSON = json; //保存json，以便下次直接读取内存数据
145. layer.photos({
146. html: '这里传入自定义的html，也可以不用传入（这意味着不会输出右侧区域）。相册支持左右方向键、Esc关闭',
147. json: json
148. });
149. });