-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path-alone.htm
More file actions
631 lines (537 loc) · 26.6 KB
/
-alone.htm
File metadata and controls
631 lines (537 loc) · 26.6 KB
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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layer 弹出层组件 - jQuery 弹出层插件</title>
<meta name="keywords" content="弹出层,jQuery弹出层插件,layer">
<meta name="description" content=" layer 是一款口碑极佳的 Web 弹层组件，她具备全方位的解决方案，致力于服务各个水平段的开发人员，您的页面会轻松地拥有丰富而友好的操作体验。">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="layui.css-v=351-1.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?v=351-1" media="all">
<link rel="stylesheet" href="global.css-v=351-1.css" tppabs="http://res.layui.com/static/css/global.css?v=351-1" media="all">
<link rel="stylesheet" href="demo.css-v=351-1.css" tppabs="http://www.layui.com/layer/demo.css?v=351-1" media="all">
<script src="jquery.min.js" tppabs="http://cdn.staticfile.org/jquery/1.12.3/jquery.min.js"></script>
<script src="layer.js-v=351-1.js" tppabs="http://res.layui.com/layui/release/layer/dist/layer.js?v=351-1"></script>
<script>
;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
</script>
</head>
<body>
<div class="header">
<div class="layui-main">
<a class="logo" href="index.htm" tppabs="http://www.layui.com/">
<img src="logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
</a>
<ul class="layui-nav">
<li class="layui-nav-item">
<a href="index.htm" tppabs="http://www.layui.com/" target="_blank">layui</a>
</li>
<li class="layui-nav-item layui-this">
<a href="alone.html" tppabs="http://www.layui.com/alone.html">layer</a>
</li>
<li class="layui-nav-item">
<a href="javascript:if(confirm(%27https://fly.layui.com/jump/txyhot/ \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher). \n\nDo you want to open it from the server?%27))window.location=%27https://fly.layui.com/jump/txyhot/%27" tppabs="https://fly.layui.com/jump/txyhot/" target="_blank" id="layer-spm-event-parter">腾讯云特惠 - 专属入口 <span class="layui-badge-dot" style="margin-top: -5px;"></span></a>
</li>
</ul>
</div>
</div>
<div class="alone-banner layui-bg-black">
<div class="layui-main">
<h1>layer 弹出层组件</h1>
<p class="layui-hide-xs">用于实现网页中的各种弹出层交互，如 Alert/Confirm/Message/Tips/Page/Iframe/Loading/Prompt/Tab/photo 应有尽有</p>
</div>
</div>
<div class="layer_nav">
<div class="box">
<a href="layer.html" tppabs="http://www.layui.com/doc/modules/layer.html" title="api" target="_blank">文档手册</a>
<a href="javascript:;" id="demore">
功能示例
<!--
<cite class="filter_nums">hot</cite>
<cite class="area_zero"></cite>
-->
</a>
<a href="hello.html" tppabs="http://www.layui.com/layer/hello.html" target="_blank">快速上手</a>
<a href="index-4.htm" tppabs="http://www.layui.com/layer/mobile/" target="_blank">
layer 移动版
</a>
</div>
</div>
<div class="runtest">
<textarea class="site-demo-text" id="testmain">
//在这里面输入任何合法的js语句
layer.open({
type: 1 //Page层类型
,area: ['500px', '300px']
,title: 'Hello layer'
,shade: 0.6 //遮罩透明度
,maxmin: true //允许全屏最小化
,anim: 1 //0-6的动画形式，-1不开启
,content: '<div style="padding:50px;">这是一个非常普通的页面层，传入了自定义的 html</div>'
});
</textarea>
<a href="javascript:;" class="layui-btn layui-btn-normal" onclick="try{new Function(testmain.value)();}catch(e){alert('语句异常：'+e.message)}" class="btns">立即运行</a>
</div>
<div class="clear box layer-main">
<!--
<a href="http://www.layui.com/layuiadmin/" target="_blank" title="layuiAdmin">
<img src="//cdn.layui.com/upload/2021_4/168_1617768452885_15407.png" alt="layuiAdmin" style="width: 1000px; margin-bottom: 5px;">
</a>
-->
<ul class="layer_notice">
<li><a href="javascript:if(confirm(%27http://fly.layui.com/jie/5366/ \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?%27))window.location=%27http://fly.layui.com/jie/5366/%27" tppabs="http://fly.layui.com/jie/5366/" target="_blank">1. layer 系列常见问题的处理和相关实用干货集锦</a></li>
<li><a href="javascript:if(confirm(%27https://gitee.com/sentsin/layer/releases/ \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher). \n\nDo you want to open it from the server?%27))window.location=%27https://gitee.com/sentsin/layer/releases/%27" tppabs="https://gitee.com/sentsin/layer/releases/" target="_blank">2. layer 所有版本完整更新日志</a></li>
<li><a href="javascript:if(confirm(%27http://fly.layui.com/jie/2461.html \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?%27))window.location=%27http://fly.layui.com/jie/2461.html%27" tppabs="http://fly.layui.com/jie/2461.html" target="_blank">3. 关注 layui 微信公众号，随时随地获取最新动态</a></li>
</ul>
<div class="layer_download">
<ul>
<li class="layui-btn-container" style="margin-top: 10px;">
<a href="javascript:if(confirm(%27https://github.com/sentsin/layer \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher). \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/sentsin/layer%27" tppabs="https://github.com/sentsin/layer" class="layui-btn layui-btn-sm layui-btn-primary" target="_blank" rel="nofollow" style="background: none; color: #24292E; ">Github</a>
<a href="javascript:if(confirm(%27https://gitee.com/sentsin/layer \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher). \n\nDo you want to open it from the server?%27))window.location=%27https://gitee.com/sentsin/layer%27" tppabs="https://gitee.com/sentsin/layer" class="layui-btn layui-btn-sm layui-btn-primary" target="_blank" rel="nofollow" style="background: none; color: #C71D23; ">Gitee</a>
<a href="javascript:if(confirm(%27https://www.npmjs.com/package/layer-src \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher). \n\nDo you want to open it from the server?%27))window.location=%27https://www.npmjs.com/package/layer-src%27" tppabs="https://www.npmjs.com/package/layer-src" class="layui-btn layui-btn-sm layui-btn-primary" target="_blank" rel="nofollow" style="background: none; color: #CE2A1F; ">NPM</a>
</li>
<li style="margin-top: 2px;">
<iframe style="border: none" src="github-btn.html-user=sentsin&repo=layer&type=watch&count=true" tppabs="http://ghbtns.com/github-btn.html?user=sentsin&repo=layer&type=watch&count=true" width="100" height="20"></iframe>
<iframe style="border: none" src="github-btn.html-user=sentsin&repo=layer&type=fork&count=true" tppabs="http://ghbtns.com/github-btn.html?user=sentsin&repo=layer&type=fork&count=true" width="100" height="20"></iframe>
</li>
</ul>
<span class="layer_yuan layer_ico ie6PNG"></span>
<a class="layui-btn layui-btn-lg layer_down" href="javascript:if(confirm(%27http://res.layui.com/static/download/layer/layer-v3.5.1.zip?v=1 \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?%27))window.location=%27http://res.layui.com/static/download/layer/layer-v3.5.1.zip?v=1%27" tppabs="http://res.layui.com/static/download/layer/layer-v3.5.1.zip?v=1" target="_blank">下载 layer 组件</a>
<span class="layer_downs">当前版本：<script>document.write(layer.v);</script>，下载数：<em id="downs">loading…</em></span>
</div>
<div class="layer-text" style="z-index:100;">
<fieldset class="layui-elem-field layui-field-title" style="margin-right: 220px;">
<legend>弹层之术</legend>
</fieldset>
<span class="layer-tool">
<a href="javascript:;" class="layui-btn" id="L_layerDebug">在线调试</a>
<a href="skin.html" tppabs="http://www.layui.com/layer/skin.html" class="layui-btn layui-btn-normal" target="_blank">扩展皮肤</a>
</span>
<p>
<i>layer</i> 是一款历年来备受青睐的 Web 弹出层组件，具备全方位的解决方案，面向各个水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。
</p>
<p>
在与同类组件的比较中，<i>layer</i> 会更能被开发者所选择。这不仅是凭「脸」取胜，而是它尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，<i>layer</i> 甚至还兼容了包括 IE6 在内的所有主流浏览器。其数量可观的基础属性和方法，使得您可以自定义太多您需要的风格，每一种弹层模式各具特色，广受欢迎。当然，这种「王婆卖瓜」的陈述听起来总是有点难受，因此你需要进一步了解她是否真的如你所愿。 <i>layer</i> 被浏览次数：<em id="sees">loading…</em>
</p>
<p>
<i>layer</i> 采用 MIT 开源许可证，<em>是一个永久无偿的公益性项目</em>。因着数年的坚持维护，已被运用在不计其数 Web 平台，已然成为网页弹出层的首先交互方案，几乎所处可见，其中还不乏众多知名大型网站。layer 已被国内乃至全世界至少数十万的开发者所使用过，并且它仍在与 Layui 开源项目一并稳步发展。<!--<a href="http://fly.layui.com/" target="_blank"><em>Fly</em></a>-->
</p>
</div>
<div class="clearfix layer-text">
<fieldset class="layui-elem-field layui-field-title">
<legend>先睹为快</legend>
</fieldset>
<div class="clearfix layer-area" id="chutiyan">
<a class="layui-btn layui-btn-primary" href="javascript:;">初体验</a>
<a class="layui-btn layui-btn-primary layui-hide" href="javascript:;">第三方扩展皮肤</a>
<a class="layui-btn layui-btn-primary" href="javascript:;">询问层</a>
<a class="layui-btn layui-btn-primary" href="javascript:;">提示层</a>
<a class="layui-btn layui-btn-primary" href="javascript:;">墨绿深蓝风</a>
<a class="layui-btn layui-btn-primary" href="javascript:;" style="_display:none;">捕获页</a>
<a class="layui-btn layui-btn-primary" href="javascript:;">页面层</a>
<a class="layui-btn layui-btn-primary" href="javascript:;">自定页</a>
<a class="layui-btn layui-btn-primary" href="javascript:;">tips层</a>
<a class="layui-btn layui-btn-primary" href="javascript:;">iframe层</a>
<a class="layui-btn layui-btn-primary" href="javascript:;">iframe层</a>
<a class="layui-btn layui-btn-primary" href="javascript:;">加载层</a>
<a class="layui-btn layui-btn-primary" href="javascript:;">loading层</a>
<a class="layui-btn layui-btn-primary" href="javascript:;">小tips</a>
<a class="layui-btn layui-btn-primary" href="javascript:;">prompt层</a>
<a class="layui-btn layui-btn-primary" href="javascript:;">tab层</a>
<a class="layui-btn layui-btn-primary" href="javascript:;">相册层</a>
<a class="layui-btn layui-btn-primary" href="javascript:;">自动关闭</a>
<a class="layui-btn layui-btn-primary" href="javascript:if(confirm(%27https://fly.layui.com/jump/txyhot/ \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher). \n\nDo you want to open it from the server?%27))window.location=%27https://fly.layui.com/jump/txyhot/%27" tppabs="https://fly.layui.com/jump/txyhot/" target="_blank">腾讯云推荐</a>
<a class="layui-btn layui-btn-primary" href="javascript:if(confirm(%27https://www.layui.com/layuiadmin/ \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher). \n\nDo you want to open it from the server?%27))window.location=%27https://www.layui.com/layuiadmin/%27" tppabs="https://www.layui.com/layuiadmin/" target="_blank">管理模板</a>
</div>
<!-- layer-970*90 -->
<!--
<div style="margin-top:10px; text-align:center;">
<ins class="adsbygoogle" style="display:inline-block;width:970px; height:90px;" data-ad-client="ca-pub-6111334333458862" data-ad-slot="5254867833"></ins>
</div>
-->
</div>
<pre id="demo1" class="layui-code" lay-height="380px" lay-title="上述示例对应代码">
特别说明：
事件需自己绑定，以下只展现调用代码。
<p>//初体验</p>
layer.alert('内容')
<p>//扩展皮肤</p>
layer.alert('内容', {
icon: 1,
skin: 'layer-ext-demo' //见：<a target="_balnk" style="color:#00B2E2;" href="javascript:if(confirm(%27http://layer.layui.com/skin.html \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?%27))window.location=%27http://layer.layui.com/skin.html#publish%27" tppabs="http://layer.layui.com/skin.html#publish">扩展说明</a>
})
<p>//询问框</p>
layer.confirm('您是如何看待前端开发？', {
btn: ['重要','奇葩'] //按钮
}, function(){
layer.msg('的确很重要', {icon: 1});
}, function(){
layer.msg('也可以这样', {
time: 20000, //20s后自动关闭
btn: ['明白了', '知道了']
});
});
<p>//提示层</p>
layer.msg('一段提示信息');
<p>//墨绿深蓝风</p>
layer.alert('墨绿风格，点击确认看深蓝', {
skin: 'layui-layer-molv' //样式类名
,closeBtn: 0
}, function(){
layer.alert('偶吧深蓝style', {
skin: 'layui-layer-lan'
,closeBtn: 0
,anim: 4 //动画类型
});
});
<p>//捕获页</p>
layer.open({
type: 1,
shade: false,
title: false, //不显示标题
content: $('.layer_notice'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
cancel: function(){
layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
}
});
<p>//页面层</p>
layer.open({
type: 1,
skin: 'layui-layer-rim', //加上边框
area: ['420px', '240px'], //宽高
content: 'html内容'
});
<p>//自定页</p>
layer.open({
type: 1,
skin: 'layui-layer-demo', //样式类名
closeBtn: 0, //不显示关闭按钮
anim: 2,
shadeClose: true, //开启遮罩关闭
content: '内容'
});
<p>//tips层</p>
layer.tips('Hi，我是tips', '吸附元素选择器，如#id');
<p>//iframe 层</p>
layer.open({
type: 2,
title: 'layer mobile页',
shadeClose: true,
shade: 0.8,
area: ['380px', '90%'],
content: 'mobile/' //iframe的url
});
<p>//iframe 层</p>
layer.open({
type: 2,
title: '很多时候，我们想最大化看，比如像这个页面。',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['893px', '600px'],
content: 'https://www.baidu.com/'
});
<p>//加载层</p>
var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
<p>//loading层</p>
var index = layer.load(1, {
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
<p>//小tips</p>
layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', {
tips: [1, '#3595CC'],
time: 4000
});
<p>//prompt层</p>
layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
layer.close(index);
layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
layer.close(index);
layer.msg('演示完毕！您的口令：'+ pass +'<br>您最后写下了：'+text);
});
});
<p>//tab层</p>
layer.tab({
area: ['600px', '300px'],
tab: [{
title: 'TAB1',
content: '内容1'
}, {
title: 'TAB2',
content: '内容2'
}, {
title: 'TAB3',
content: '内容3'
}]
});
<p>//相册层</p>
$.getJSON('test/photos.json?v='+new Date, function(json){
layer.photos({
photos: json //格式见API文档手册页
,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
});
});
<p>//显示自动关闭倒计秒数</p>
layer.alert('在标题栏显示自动关闭倒计秒数', {
time: 5*1000
,success: function(layero, index){
var timeNum = this.time/1000, setText = function(start){
layer.title((start ? timeNum : --timeNum) + ' 秒后关闭', index);
};
setText(!0);
this.timer = setInterval(setText, 1000);
if(timeNum <= 0) clearInterval(this.timer);
}
,end: function(){
clearInterval(this.timer);
}
});
<p></p><p></p>
</pre>
<div class="layer-text" style="padding:20px 0 10px;" id="yiwang">
<fieldset class="layui-elem-field layui-field-title">
<legend>再试牛刀</legend>
</fieldset>
</div>
<ul class="clearfix demolist">
<li class="layer-area">
<div>信息框</div>
<a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">例1</a>
<a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">例2</a>
<a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">例3</a>
<a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">例4</a>
<a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">例5</a>
</li>
<li class="layer-area">
<div>页面层/iframe层</div>
<a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">页面层-自定义</a>
<a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">页面层-图片</a>
<a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;" id="parentIframe">iframe-子父操作</a>
<a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">iframe-多媒体</a>
<a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">iframe-禁滚动条</a>
</li>
<li>
<!-- layer-300*250 -->
<!--
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="2182025432"></ins>
-->
</li>
<li class="layer-area">
<div>加载层</div>
<a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">默认</a>
<a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">风格2</a>
<a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">风格3</a>
<a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">风格4</a>
<a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">打酱油</a>
</li>
<li class="layer-area">
<div>tips层</div>
<a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">上</a>
<a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">右</a>
<a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">下</a>
<a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">左</a>
<a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">允许多个</a>
</li>
<li class="layer-area">
<div>其它演示</div>
<a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">默认prompt</a>
<a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">屏蔽浏览器滚动条</a>
<a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">弹出即全屏</a>
<a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">正上方</a>
<a class="layui-btn layer-demolist" href="more.html" tppabs="http://www.layui.com/layer/test/more.html" target="_blank">更多例子</a>
</li>
</ul>
<pre id="demo2" class="layui-code" lay-height="360px" lay-title="对应配置">
<p>//信息框-例1</p>
layer.alert('见到你真的很高兴', {icon: 6});
<p>//信息框-例2</p>
layer.msg('你确定你很帅么？', {
time: 0 //不自动关闭
,btn: ['必须啊', '丑到爆']
,yes: function(index){
layer.close(index);
layer.msg('雅蠛蝶 O.o', {
icon: 6
,btn: ['嗷','嗷','嗷']
});
}
});
<p>//信息框-例3</p>
layer.msg('这是最常用的吧');
<p>//信息框-例4</p>
layer.msg('不开心。。', {icon: 5});
<p>//信息框-例5</p>
layer.msg('玩命卖萌中', function(){
//关闭后的操作
});
<p>//页面层-自定义</p>
layer.open({
type: 1,
title: false,
closeBtn: 0,
shadeClose: true,
skin: 'yourclass',
content: '自定义HTML内容'
});
<p>//页面层-图片</p>
layer.open({
type: 1,
title: false,
closeBtn: 0,
area: ['auto'],
skin: 'layui-layer-nobg', //没有背景色
shadeClose: true,
content: $('#tong')
});
<p>//iframe层-父子操作</p>
layer.open({
type: 2,
area: ['700px', '450px'],
fixed: false, //不固定
maxmin: true,
content: 'test/iframe.html'
});
<p>//iframe层-多媒体</p>
layer.open({
type: 2,
title: false,
area: ['630px', '360px'],
shade: 0.8,
closeBtn: 0,
shadeClose: true,
content: '//player.youku.com/embed/XMzI1NjQyMzkwNA=='
});
layer.msg('点击任意处关闭');
<p>//iframe层-禁滚动条</p>
layer.open({
type: 2,
area: ['360px', '500px'],
skin: 'layui-layer-rim', //加上边框
content: ['mobile/', 'no']
});
<p>//加载层-默认风格</p>
layer.load();
//此处演示关闭
setTimeout(function(){
layer.closeAll('loading');
}, 2000);
<p>//加载层-风格2</p>
layer.load(1);
//此处演示关闭
setTimeout(function(){
layer.closeAll('loading');
}, 2000);
<p>//加载层-风格3</p>
layer.load(2);
//此处演示关闭
setTimeout(function(){
layer.closeAll('loading');
}, 2000);
<p>//加载层-风格4</p>
layer.msg('加载中', {
icon: 16
,shade: 0.01
});
<p>//打酱油</p>
layer.msg('尼玛，打个酱油', {icon: 4});
<p>//tips层-上</p>
layer.tips('上', '#id或者.class', {
tips: [1, '#0FA6D8'] //还可配置颜色
});
<p>//tips层-右</p>
layer.tips('默认就是向右的', '#id或者.class');
<p>//tips层-下</p>
layer.tips('下', '#id或者.class', {
tips: 3
});
<p>//tips层-左</p>
layer.tips('左边么么哒', '#id或者.class', {
tips: [4, '#78BA32']
});
<p>//tips层-不销毁之前的</p>
layer.tips('不销毁之前的', '#id或者.class', {
tipsMore: true
});
<p>//默认prompt</p>
layer.prompt(function(val, index){
layer.msg('得到了'+val);
layer.close(index);
});
<p>//屏蔽浏览器滚动条</p>
layer.open({
content: '浏览器滚动条已锁',
scrollbar: false
});
<p>//弹出即全屏</p>
var index = layer.open({
type: 2,
content: 'https://fly.layui.com/jump/alyhot/',
area: ['320px', '195px'],
maxmin: true
});
layer.full(index);
<p>//正上方</p>
layer.msg('灵活运用offset', {
offset: 't',
anim: 6
});
//更多例子
layer.msg('Hi');
</pre>
<div style="margin-top: 20px; text-align: center;">
<p style=" font-weight: 300;">倘若 layer 于你有益，欢迎：</p>
<a href="javascript:if(confirm(%27http://fly.layui.com/sponsors?from=layer \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?%27))window.location=%27http://fly.layui.com/sponsors?from=layer%27" tppabs="http://fly.layui.com/sponsors?from=layer" target="_blank" class="layui-btn layui-btn-warm" style="margin-top: 10px;">小额赞赏</a>
</div>
<div class="layer-text" id="yiwang" style="padding:20px 0 10px;">
<fieldset class="layui-elem-field layui-field-title">
<legend>美妙之旅</legend>
</fieldset>
<blockquote class="layui-elem-quote">
事实上 layer 提供的丰富的基础属性，已经足够让你的弹出框/层变得千变万化，请恕我们无法为您逐一演示。如果您仍觉得文档和代码有不当之处，迫切地希望您能反馈，你可以通各种方式进入 layer 的圈子，许多和你一样的小伙伴将会和你一起，经历这段美妙的开发旅程。
</blockquote>
</div>
<!--
<a href="https://layim.layui.com?from=layer" target="_blank" title="layim">
<img src="//cdn.layui.com/upload/2018_8/168_1534454846756_6275.png" alt="layim" style="max-width: 100%; margin-bottom: 5px;">
</a>
-->
</div>
<div class="hide" ><img src="tong.jpg" tppabs="http://www.layui.com/layer/images/tong.jpg"></div>
<div id="tong" class="hide" style="width: 670px; height: 320px;">
<a href="javascript:if(confirm(%27https://fly.layui.com/jump/txy/ \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher). \n\nDo you want to open it from the server?%27))window.location=%27https://fly.layui.com/jump/txy/%27" tppabs="https://fly.layui.com/jump/txy/" target="_blank">
<img src="168_1573492741201_28207.jpg" tppabs="http://cdn.layui.com/upload/2019_11/168_1573492741201_28207.jpg" style="max-width: 100%;">
</a>
</div>
<div class="layui-footer footer footer-index">
<div class="layui-main">
<p>© <a href="index.htm" tppabs="http://www.layui.com/">layui.com</a> MIT license</p>
</div>
</div>
<script src="layui.js-v=351-1.js" tppabs="http://res.layui.com/layui/dist/layui.js?v=351-1"></script>
<script src="demo.js-v=351-1.js" tppabs="http://www.layui.com/layer/demo.js?v=351-1"></script>
<script async src="adsbygoogle.js" tppabs="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
var i = 0, len = jQuery('.adsbygoogle').length;
for(; i < len; i++){
(adsbygoogle = window.adsbygoogle || []).push({});
}
(adsbygoogle = window.adsbygoogle || []).push({
//google_ad_client: "ca-pub-6111334333458862",
//enable_page_level_ads: true
});
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "hm.js-d214947968792b839fd669a4decaaffc"/*tpa=https://hm.baidu.com/hm.js?d214947968792b839fd669a4decaaffc*/;
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<!--[if IE 6]>
<script type="text/javascript" src="png.js" tppabs="http://res.layui.com/static/lay/lib/png.js"></script>
<script type="text/javascript">DD_belatedPNG.fix('.ie6PNG');</script>
<![endif]-->
</body>
</html>