弹出框插件layer使用

2018-06-24 01:25:23来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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以上所有的浏览器,显著提升网站逼格。推荐使用。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:H5学习入门

下一篇:HTML学习笔记《一》 ---- HTML基本认识