前端开发：一款近年非常受欢迎、简单的WEB弹出层组件（layer）

IT痕迹 2017-10-01 16:43

layer是一个开源免费的弹出层组件，简单易用、美观，功能强大能够满足你对弹出层的几乎所有需求，每一种模式都有自己的特色，调用简单实用性强，可轻松实现Alert、Confirm、Prompt、普通提示、页面区块、iframe、tips等几乎所有的弹出模式。此组件知名度高，在此仅介绍给不知道的新人，谢谢支持。

1、下载及初始化

//layer.layui.com/

layer是一个独立的组件，能够在不引入layui的情况下单独引入layer，下载文件后放到项目任意位置，在页面输入如下代码引入jQuery和layerjs即可。需要注意的是jQuery必须引入1.8及以上版本。



在页面body中添加一个按钮，为按钮添加id属性<button id="test1">运行</button>，运行如下代码脚本，点击按钮即可。





2、不同模式弹层的演示

layer调用不同内置方法即可弹出不同模式的弹层，内置多个配置属性，可以配置标题、内容、皮肤、宽高、弹出位置、按钮（包括关闭按钮、自定义按钮、排序等）、自动关闭时间、遮盖、动画、是否允许拉伸等；多种状态监听事件；通过不同功能组合，就能够实现你想要的需求。下面简单展示一下不同模式的弹层。

①基础层





②询问层







③页面层





④Tips层





⑤加载层





⑥prompt层





⑦tab层





⑧相册层





⑨边缘弹出





⑩iframe层





API文档：

//www.layui.com/doc/modules/layer.html

layer弹层小巧简单，但功能确一点也不简单，使用方便、美观，layer兼容所有现代浏览器及IE6+，能够轻松应对各种使用场景，这个组件强烈推举给大家。写这篇文章只为让更多人知道layer，写得不好的地方，请各位大神轻喷，再次感谢。