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