jquery layer弹窗弹层插件 (转)

Posted 2020-09-16

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