弹出框插件layer使用

最新推荐文章于 2025-08-12 08:54:10 发布

转载最新推荐文章于 2025-08-12 08:54:10 发布 · 202 阅读

文章标签：

#javascript #ViewUI

本文介绍了一款兼容性极佳的web弹层组件layer，该插件支持各种浏览器，包括IE6，并提供了丰富的示例代码，展示了如何实现alert及confirm弹窗功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。

插件官方地址：http://layer.layui.com/

layer 甚至兼容了包括IE6在内的所有主流浏览器。

少说多做，代码演示（拷贝直接运行）：

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 
 4     <head>
 5         <meta charset="UTF-8" />
 6         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 8         <title>弹出框插件layer使用</title>
 9     </head>
10 
11     <body>
12         <div class="clearfix layer-area" id="chutiyan">
13             <a class="layui-btn layui-btn-primary" href="javascript:;">alert弹出框</a>
14             <a class="layui-btn layui-btn-primary" href="javascript:;">confirm弹出框</a>
15         </div>
16         <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
17         <script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
18         <script type="text/javascript">
19             $('#chutiyan>a').on('click', function() {
20                 var othis = $(this),
21                     index = othis.index();
22                 switch(index) {
23                     case 0:
24                         layer.alert('弹出框内容', {
25                             icon: -1,
26                             shadeClose: true,
27                             title: '弹出框标题'
28                         });
29                         break;
30 
31                     case 1:
32                         layer.confirm('您是如何看待前端开发？', {
33                             btn: ['重要', '奇葩'] //按钮
34                         }, function() {
35                             layer.msg('重要', {
36                                 icon: 1
37                             });
38                         }, function() {
39                             layer.msg('奇葩', {
40                                 icon: 1
41                             });
42                         });
43                         break;
44 
45                     default:
46                         layer.msg('Hi!');
47                         break;
48                 }
49             });
50         </script>
51     </body>
52 
53 </html>