jQuery Layer 弹层组件

Posted 2020-08-15

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

在与同类组件的比较中，layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，正因如此，越来越多的开发者将媚眼投上了layer。layer兼容了包括IE6在内的所有主流浏览器。 她数量可观的接口，使得您可以自定义太多您需要的风格，每一种弹层模式各具特色，皆广受欢迎。当然，这种“王婆卖瓜”的陈述听起来总是有点难受，因此你需要进一步了解她是否真的如你所愿。

1. 版本Layer 2.2

2. 作者：贤心闲

3. github

在线实例

实例预览 layer实例DEMO演示-jQuery弹出层插件

实例预览 layer实例测试

参考手册

帮助文档 layer API 帮助文档

引入文件

1. <link rel="stylesheet" href="layer.css" media="all">
2. <script type="text/javascript" src="jquery.min.js"></script>
3. <script type="text/javascript" src="layer.js"></script>

复制

使用方法

1. <a href="javascript:;" onclick="test();">点我弹窗</a>
2. <script>
3. function test() {
4. //在这里面输入任何合法的js语句
5. layer.open({
6. type: 1,
7. //page层
8. area: [‘500px‘, ‘300px‘],
9. title: ‘你好，layer。‘,
10. shade: 0.6,
11. //遮罩透明度
12. moveType: 1,
13. //拖拽风格，0是默认，1是传统拖动
14. shift: 1,
15. //0-6的动画形式，-1不开启
16. content: ‘<div style="padding:50px;">这是一个非常普通的页面层（type:1），传入了自定义的html</div>‘
17. });
18. }
19. </script>

复制

---

下载

 

以上是关于jQuery Layer 弹层组件的主要内容，如果未能解决你的问题，请参考以下文章

如何得layui-layer弹层组件的宽高

弹层组件-layer

layer ----- 弹层

layer一款web弹层组件经典案例

layer是一款近年来备受青睐的web弹层组件

web弹层组件-layer封装的工具类