弹出框插件layer使用
2017-05-31 16:22
246 查看
layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。
插件官方地址:http://layer.layui.com/
layer 甚至兼容了包括IE6在内的所有主流浏览器。
少说多做,代码演示(拷贝直接运行):
效果:
(1)alert弹出框
(2)confirm弹出框
3、总结
layer弹出框插件可保证所有浏览器弹出框效果一致,并且兼容IE6以上所有的浏览器,显著提升网站逼格。推荐使用。
插件官方地址:http://layer.layui.com/
layer 甚至兼容了包括IE6在内的所有主流浏览器。
少说多做,代码演示(拷贝直接运行):
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>弹出框插件layer使用</title> </head> <body> <div class="clearfix layer-area" id="chutiyan"> <a class="layui-btn layui-btn-primary" href="javascript:;">alert弹出框</a> <a class="layui-btn layui-btn-primary" href="javascript:;">confirm弹出框</a> </div> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script> <script type="text/javascript"> $('#chutiyan>a').on('click', function() { var othis = $(this), index = othis.index(); switch(index) { case 0: layer.alert('弹出框内容', { icon: -1, shadeClose: true, title: '弹出框标题' }); break; case 1: layer.confirm('您是如何看待前端开发?', { btn: ['重要', '奇葩'] //按钮 }, function() { layer.msg('重要', { icon: 1 }); }, function() { layer.msg('奇葩', { icon: 1 }); }); break; default: layer.msg('Hi!'); break; } }); </script> </body> </html>
效果:
(1)alert弹出框
(2)confirm弹出框
3、总结
layer弹出框插件可保证所有浏览器弹出框效果一致,并且兼容IE6以上所有的浏览器,显著提升网站逼格。推荐使用。
相关文章推荐
- jQuery使用Layer弹出层插件闪退问题
- 在Vue中使用layer.js弹出层插件
- layer (jQuery弹出层插件)使用
- 弹出框插件layer使用
- 最近在使用MyEclipse的SVN插件时总是弹出一个大大的对话框,报一个Failed to load JavaHL Library.错误 [java] view plaincopy Failed
- jquery插件右下弹出框(以及在FRAME里的使用)
- 使用jquery的blockui插件显示弹出层
- 使用jQuery的message插件实现右下角弹出消息框
- 使用jquery的blockui插件显示弹出层
- 使用jquery的blockui插件显示弹出层
- 最近在使用MyEclipse的SVN插件时总是弹出一个大大的对话框,报一个Failed to load JavaHL Library.错误
- jQuery boxy弹出层插件中文演示及使用讲解
- 使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
- 最近在使用MyEclipse的SVN插件时总是弹出一个大大的对话框,报一个Failed to load JavaHL Library.错误
- 使用jQuery的message插件实现右下角弹出消息框
- 使用jQuery的message插件实现右下角弹出消息框
- Jquery弹出层插件和拖拽插件的结合使用范例
- jQuery boxy弹出层插件中文演示及使用讲解
- Jquery弹出层插件Thickbox使用心得
- ·jQuery弹出层插件Thickbox使用心得