https://www.shanghaiairport.com/cn/js/layer/dialog.js

1/**
2 * Layer弹出框类[基于layer实现常用弹出框类]
3 * @author XQS
4 * @date 2018.08.26
5 * @version 1.0
6 */
7
8/*layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。
9若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）*/
10
11var icon = -1;//图标。信息框和加载层的私有参数。类型：Number，默认：-1（信息框）/0（加载层）
12var time = 0;//自动关闭所需毫秒。类型：Number，默认：0默认不会自动关闭
13var anim = 0;//弹出动画。类型：Number。 取值：0 平滑放大（默认）、1从上掉落、2从最底部往上滑入、3从左滑入、4从左翻滚、5渐显、6抖动
14
15var loadingIndex;//加载层序号，便于关闭
16
17layer.config({
18    anim: 5, //默认动画风格
19    // skin: 'layui-layer-molv' //皮肤layui-layer-lan，layui-layer-molv（默认）
20});
21
22var dialog = {
23    /**
24     * #提示框 - layer.msg(content, options, end)
25     */
26    /**
27     * 提示框[一些简单的提示信息]
28     * @param message 提示内容
29     * @param icon icon
30     * @param time 自动关闭所需毫秒（如果不配置，默认是3秒）
31     * @param func 自动关闭后执行特定的函数 string(函数名),bool(false)表示不执行
32     */
33    msg : function(message, icon, time = 0, func = false){
34        var index = layer.msg(message, {
35            icon: icon,
36            time: time, //3秒关闭
37        }, function(){
38            if(func != false){
39                var f = eval(func);
40            }
41        });
42    },
43    /**
44     * 提示框[带按钮的提示信息]
45     * @param message 提示内容
46     * @param icon icon取[-1,0,1,2,3,4,5,6]
47     * @param btn 确定按钮名称,取消按钮名称
48     * @param func 自动关闭后执行特定的函数 string(函数名),bool(false)表示不执行
49     * @param time 自动关闭所需毫秒,这里不需要关闭（如果不配置，默认是0秒）
50     */
51    msgBtn : function(message, icon, func = false, btn = ['确定','取消'], time = 0){
52        var index = layer.msg(message, {
53            icon: icon,
54            btn: btn,
55            time: time,
56            yes: function(){
57                if(func != false){
58                    var f = eval(func);
59                }else{
60                    layer.close(index);
61                }
62            }
63        });
64    },
65
66    /**
67     * #普通信息框 - layer.alert(content, options, yes)
68     */
69    /**
70     * 普通信息框
71     * @param message 提示内容
72     * @param title 信息框标题,为false时不显示标题
73     * @param icon 图标[0=>黄色❕;1=>绿色✔;2=>红色❌;3=>黄色❓;4=>黑色🔒;5=>红色☹;6=>绿色🙂]
74     * @param time 自动关闭所需毫秒，默认为0 表示不关闭
75     */
76     alert : function(title, content, icon = 0, func = false, time = 0){
77        var index = layer.alert(content, {
78            icon: icon,
79            title: title,
80            time: time
81        },
82        function(index){
83            //do something
84            if(func != false){
85                var f = eval(func);
86            }else{
87                layer.close(index);
88            }
89        });
90     },
91
92    /**
93     * #询问框 - layer.confirm(content, options, yes, cancel)
94     */
95    /**
96     * 询问框
97     * @param message 提示内容
98     * @param title 信息框标题,为false时不显示标题
99     * @param icon 图标[0=>黄色❕;1=>绿色✔;2=>红色❌;3=>黄色❓;4=>黑色🔒;5=>红色☹;6=>绿色🙂]
100     * @param yes 点击确定按钮后执行的函数名,如不需执行传入false即可。
101     * @param no 点击取消按钮后执行的函数名,如不需执行传入false即可。
102     * @param time 自动关闭所需毫秒，默认为0 表示不关闭
103     */
104    confirm : function(title, content, icon = 0, yes = false, no = false, time = 0){
105        var index = layer.confirm(content, {
106            icon: 3,
107            title: title,
108            time: time
109        },
110        function(index){
111            //do something
112            if(yes != false){
113                var f = eval(yes);
114            }else{
115                layer.close(index);
116            }
117        },
118        function(index){
119            //do something
120            if(no != false){
121                var f = eval(no);
122            }else{
123                layer.close(index);
124            }
125        });
126    },
127
128    /**
129     * #加载层 - layer.load(icon, options)
130     */
131    /**
132     * 加载层
133     * @param message 提示内容
134     * @param title 信息框标题,为false时不显示标题
135     * @param icon 加载图标
136     * @param time 自动关闭所需毫秒，默认为0 表示不关闭
137     */
138     load : function(icon, func, time = 0){
139        var index = layer.load(icon, {
140            time: time,
141            // shade: [opacity, color] //0.1透明度的白色背景
142        });
143     },
144
145    /**
146     * #tips层 - layer.tips(content, follow, options)
147     */
148    /**
149     * tips层
150     * @param id 
151     * @param content 提示内容
152     * @param tips 
153     * @param color 
154     */
155     tips : function(id, content, tips = 1, color = '#000000'){
156        layer.tips(content, id, {
157            tips: [tips, color],
158            tipsMore: true
159        });
160     },
161
162    /**
163     * #输入层 - layer.prompt(options, yes)
164     */
165    /**
166     * 输入层
167     * @param formType //输入框类型，支持0（文本）默认1（密码）2（多行文本

167）
168     * @param title 输入层标题,为false时不显示标题
169     * @param value 初始时的值，默认空字符 
170     * @param area 自定义文本域宽高,formType为2时有效
171     * @param maxlength: 140, //可输入文本的最大长度，默认500
172     */
173    prompt : function(formType = 1, title = false, value = '', func =false, area = []){
174        layer.prompt({
175            formType: formType,
176            value: value,
177            title: title,
178            area: area //自定义文本域宽高
179        }, function(value, index, elem){
180            alert(area);
181            //do something
182            if(func != false){
183                console.log(value); //得到value
184                var f = eval(func);
185            }else{
186                layer.close(index);
187            }
188        });
189    },
190
191    /**
192     * #tab层 - layer.tab(options)
193     * 此层开发难度较大，不适合作为通用案例。请按需开发
194     */
195    /**
196     * tab层
197     * @param formType //输入框类型，支持0（文本）默认1（密码）2（多行文本）
198     * @param title 输入层标题,为false时不显示标题
199     * @param value 初始时的值，默认空字符 
200     * @param area 自定义文本域宽高,formType为2时有效
201     * @param maxlength: 140, //可输入文本的最大长度，默认500
202     */
203     tab : function(){
204        layer.tab({
205            area: ['600px', '300px'],
206                tab: [{
207                title: 'TAB1', 
208                content: '内容1'
209            }, {
210                title: 'TAB2', 
211                content: '内容2'
212            }, {
213                title: 'TAB3', 
214                content: '内容3'
215            }]
216            }); 
217     },
218
219    /** 信息框[type:0]
220    icon: 0-6
221    **/
222    /**
223     * 成功弹出框[一般用于操作成功且不需要跳转的提示]
224     * @param message 提示内容
225     * @param title 信息框标题
226     * @param level 提示级别
227     * @param time 自动关闭所需毫秒，默认为0 表示不关闭
228     */
229    success : function(message, title = '', time = 0) {
230        if(typeof(title) == "undefined" || title == false || title.trim() == 0 || title.trim() == ''){
231            title = '信息';
232        }
233        layer.open({
234            type: 0,
235            icon: 1,
236            title: title,
237            content: message,
238            time : time,
239        });
240    },
241    /**
242     * 信息弹出框[一般用于普通操作的提示]
243     * @param message 提示内容
244     * @param title 信息框标题
245     * @param time 自动关闭所需毫秒，默认为0 表示不关闭
246     */
247     info : function(message, title = '', time = 0){
248        if(typeof(title) == "undefined" || title == false || title.trim() == 0 || title.trim() == ''){
249            title = '信息提示';
250        }
251        layer.open({
252            type : 0,
253            icon : 0,
254            title : title,
255            content : message,
256            time : time,
257        });
258     },
259    /**
260     * 警告弹出框[一般用于警告提示]
261     * @param message 提示内容
262     * @param title 信息框标题
263     * @param time 自动关闭所需毫秒，默认为0 表示不关闭
264     */
265     warming : function(message, title = '', time = 0){
266        if(typeof(title) == "undefined" || title == false || title.trim() == 0 || title.trim() == ''){
267            title = '警告提示';
268        }
269        layer.open({
270            type : 0,
271            icon : 5,
272            title : title,
273            content : message,
274            time : time,
275        });
276     },
277    /**
278     * 错误弹出框[一般用于操作出现错误时的提示]
279     * @param message 提示内容
280     * @param title 信息框标题
281     * @param time 自动关闭所需毫秒，默认为0 表示不关闭
282     */
283    error : function(message, title = '', time = 0) {
284        if(typeof(title) == "undefined" || title == false || title.trim() == 0 || title.trim() == ''){
285            title = '错误提示';
286        }
287        layer.open({
288            type : 0,
289            icon : 2,
290            title : title,
291            content : message,
292            time : time,
293        });
294    },
295    /**
296     * 成功弹出框[一般用于操作成功且需要跳转的提示]
297     * @param message 提示内容
298     * @param url 点击确认后跳转的URL链接
299     * @param title 信息框标题
300     * @param time 自动关闭所需毫秒，默认为0 表示不关闭
301     */
302    successGo : function(message, url, title = '', time = 0) {
303        if(typeof(title) == "undefined" || title == false || title.trim() == 0 || title.trim() == ''){
304            title = '信息';
305        }
306        layer.open({
307            type: 0,
308            icon: 1,
309            title: title,
310            content: message,
311            time : time,
312            yes: function(){
313                location.href = url;
314            },
315            cancel: function(index, layero){
316                layer.close(index)
317                return false;

318            },
319        });
320    },
321    /**
322     * 信息弹出框[一般用于普通操作之后需要跳转的提示]
323     * @param message 提示内容
324     * @param url 点击确认后跳转的URL链接
325     * @param title 信息框标题
326     * @param time 自动关闭所需毫秒，默认为0 表示不关闭
327     */
328     infoGo : function(message, url, title = '', time = 0){
329        if(typeof(title) == "undefined" || title == false || title.trim() == 0 || title.trim() == ''){
330            title = '信息提示';
331        }
332        layer.open({
333            type : 0,
334            icon : 0,
335            title : title,
336            content : message,
337            time : time,
338            yes: function(){
339                location.href = url;
340            },
341            cancel: function(index, layero){
342                layer.close(index)
343                return false;
344            },
345        });
346     },
347    /**
348     * 警告弹出框[一般用于警告提示之后需要跳转的提示]
349     * @param message 提示内容
350     * @param url 点击确认后跳转的URL链接
351     * @param title 信息框标题
352     * @param time 自动关闭所需毫秒，默认为0 表示不关闭
353     */
354     warmingGo : function(message, url, title = '', time = 0){
355        if(typeof(title) == "undefined" || title == false || title.trim() == 0 || title.trim() == ''){
356            title = '警告提示';
357        }
358        layer.open({
359            type : 0,
360            icon : 5,
361            title : title,
362            content : message,
363            time : time,
364            yes: function(){
365                location.href = url;
366            },
367            cancel: function(index, layero){
368                layer.close(index)
369                return false;
370            },
371        });
372     },
373    /**
374     * 错误弹出框[一般用于操作出现错误之后需要跳转的提示]
375     * @param message 提示内容
376     * @param url 点击确认后跳转的URL链接
377     * @param title 信息框标题
378     * @param time 自动关闭所需毫秒，默认为0 表示不关闭
379     */
380    errorGo : function(message, url, title = '', time = 0) {
381        if(typeof(title) == "undefined" || title == false || title.trim() == 0 || title.trim() == ''){
382            title = '错误提示';
383        }
384        layer.open({
385            type : 0,
386            icon : 2,
387            title : title,
388            content : message,
389            time : time,
390            yes: function(){
391                location.href = url;
392            },
393            cancel: function(index, layero){
394                layer.close(index)
395                return false;
396            },
397        });
398    },
399
400    /**
401     * #询问框 - layer.confirm(content, options, yes, cancel)
402     */
403    /**
404     * 询问框[]
405     * @param message 提示内容
406     * @param icon icon
407     * @param time 自动关闭所需毫秒（如果不配置，默认是3秒）
408     * @param func 自动关闭后执行特定的函数 string(函数名),bool(false)表示不执行
409     */
410     // confirm : function(){
411     //    layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
412     //        //do something
413     //        layer.close(index);
414     //    });
415     // },
416
417    /**
418     * 确认弹出层[无需跳转到指定页面的确认弹出层，一般用于确认之后执行之后的操作]
419     * @param message 提示内容
420     * @param url 点击确认后跳转的URL链接
421     * @param title 信息框标题
422     * @param time 自动关闭所需毫秒，默认为0 表示不关闭
423     */
424    confirms : function(message) {
425        layer.open({
426            type: 0,
427            icon: 3,
428            content: message,
429            btn: ['是','否'],
430            yes: function(){
431                alert('需要执行的操作！');
432            },
433            cancel: function(index, layero){
434                layer.close(index)
435                return false;
436            },
437        });
438    },
439    /**
440     * 确认弹出层[一般用于确认之后需要跳转]
441     * @param message 提示内容
442     * @param url 点击确认后跳转的URL链接
443     * @param title 信息框标题
444     * @param time 自动关闭所需毫秒，默认为0 表示不关闭
445     */
446    confirmsGo : function(message, url, title = '', time = 0) {
447        layer.open({
448            type: 0,
449            icon: 3,
450            content: message,
451            time : time,
452            btn: ['是','否'],
453            yes: function(){
454                location.href = url;
455            },
456            cancel: function(index, layero){
457                layer.close(index)
458                return false;

459            },
460        });
461    },
462    
463    /** 加载层 - layer.load(icon, options) **/
464    /**
465     * 加载层[]
466     * @param type 取值为0-2，默认为0
467     * @param color 背景颜色
468     * @param opacity 背景颜色透明度
469     */
470    loading : function(type, color, opacity){
471        if(typeof(type) == "undefined" || type == false || type.trim() == 0 || type.trim() == ''){
472            type = 0;
473        }
474        if(typeof(color) == "undefined" || color == false || color.trim() == 0 || color.trim() == ''){
475            color = '#333';
476        }
477        if(typeof(opacity) == "undefined" || opacity == false || opacity.trim() == 0 || opacity.trim() == ''){
478            opacity = '0.6';
479        }
480        index = layer.load(type, {
481            shade: [opacity, color] //0.1透明度的白色背景
482        });
483    },
484
485    /** iframe窗 **/
486    /**
487     * iframe窗[]
488     * @param title 标题 string('这是标题'),为false则不显示
489     * @param url 地址 string('http://www.baidu.com')
490     * @param width 宽度 string('100px')
491     * @param height 高度 string('100px')
492     * @param full 是否全屏 bool(true/false)
493     */
494    iframe : function(title, url, width, height, full){
495        var index = layer.open({
496            type: 2,
497            title: title,//title: false,
498            content: [url, 'yes'], //iframe的url，no代表不显示滚动条
499            area: [width, height],//['893px', '600px'],
500            // offset: [
501            //     ($(window).height()-height)/2,
502            //     ($(window).width()-width)/2
503            // ],
504            closeBtn: 1, //1显示关闭按钮,0不显示关闭按钮
505            maxmin: true, //开启最大化最小化按钮
506            shade: [0],//shade: false,//不显示遮罩
507            shadeClose: false,//点击空白区域关闭
508            // offset: 'rb', //右下角弹出
509            // time: 0, //2秒后自动关闭
510            // anim: 1,//动画方式,默认0平滑放大,1从上掉落,2从最底部往上滑入,3从左滑入,4从左翻滚,5渐显,6抖动.
511            // end: function(){
512            // }
513        });
514        if(full){
515            layer.full(index);
516        }
517    }
518
519}
520