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>
效果:
(1)alert弹出框
(2)confirm弹出框
3、总结
layer弹出框插件可保证所有浏览器弹出框效果一致,并且兼容IE6以上所有的浏览器,显著提升网站逼格。推荐使用。