刚入公司不久，就开始做项目了，最后还是选择用layui来做前端的页面，一来是可以自适应，二来是用框架比较方便，简洁。
先看下Layui的介绍：
layui 是一款采用自身模块规范编写的情怀级前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于MVVM底层的UI框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。layui 兼容人类正在使用的全部浏览器（IE6/7除外），可作为PC端后台系统与前台界面的速成开发方案。
获取Layui
可以在http://www.layui.com/ 下载到 layui 的最新版，它经过了自动化构建，更适合用于生产环境。
快速上手
获得 layui 后，将其完整地部署到你的项目目录（或静态资源服务器），你只需要引入下述两个文件：
./layui/css/layui.css ./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js
这两个文件是最基本的也是最重要的。因为他们（比如各模块）都是在最终使用的时候才会自动加载。这是一个基本的入门页面
模块化方式
个人建议推荐使用遵循 layui 的模块规范建立一个入口文件，并通过 layui.use() 方式来加载该入口文件，如下所示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>开始使用layui</title> <link rel="stylesheet" href="../layui/css/layui.css"> </head> <body> <!-- 你的HTML代码 --> <script src="../layui/layui.js"></script> <script> //一般直接写在一个js文件中 layui.use(['layer', 'form'], function(){ var layer = layui.layer ,form = layui.form; layer.msg('Hello World'); }); </script> </body> </html>
非模块化方式（即所有的模块一次性全部加载）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>非模块化方式使用layui</title> <link rel="stylesheet" href="../layui/css/layui.css"> </head> <body> <!-- 你的HTML代码 --> <script src="../layui/layui.all.js"></script> <script> //由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可： ;!function(){ var layer = layui.layer ,form = layui.form; layer.msg('Hello World'); }(); </script> </body> </html>
模块化与非模块化
个人比较喜欢模块化，因为模块化是你需要的时候就加载，假如是非模块化的话，一开始就全部加载了所有的js文件，但实际上，有些页面用到的模块可能很少，并不需要加载那么大的js文件，所以还是推荐使用模块化的方式，非模块化的方式虽然方便，但对用户来说是不太好的。
模块规范
layui的模块是基于layui.js内部实现的异步模块加载方式，并不遵循AMD，而是自己定义了一套更轻量的模块规模。并且这种方式在经过了大量的实战后，成为layui最核心的模块加载引擎。
预先加载
Layui的模块加载采用核心的layui.use(mods,callback)方法，当你JS需要用到layui模块的时候，我们推荐使用采用预先加载，因为这样可以避免到处写layui.use，这样很麻烦，应该在最外层定义:
/* Demo1.js 使用Layui的form和upload模块 */ layui.use(['form', 'upload'], function(){ //如果只加载一个模块，可以不填数组。如：layui.use('form') var form = layui.form //获取form模块 ,upload = layui.upload; //获取upload模块 //监听提交按钮 form.on('submit(test)', function(data){ console.log(data); }); //实例化一个上传控件 upload({ url: '上传接口url' ,success: function(data){ console.log(data); } }) });
按需加载(此方法不推荐使用)
如果你是一位有强迫症的人，你对网站的性能有极致的要求，你并不想预先加载所需的模块，而是触发一个指令或动作的时候，才气加载模块，那么，这是可以的。你不用在你的JS最外层区包裹这一个那么大的layui.use,你只需要:
button.addEvent('click',function(){
layui.use('laytp1',function(laytp1){//注意:多次调用use并不会重复加载laytpl.js，Layui内部有做模块cache处理。
var html=laytp1('').render({});
console.log(html);
})
})
注意:如果你的JS中需要大量用到模块，个人建议不推荐您采用这种加载方式，因为这意味着你要写很多layui.use(),代码可维护性不高。
建议还是采用:预先加载。即一个JS文件中，写一个use即可。
扩展一个Layui的三个步骤：
第一步:确认模块名，假设为：test.js文件放入项目任意目录下（注意：不用放入layui目录）
第二步：编写test.js如下:
layui.define(function(exports){ //提示：模块也可以依赖其它模块，如：layui.define('layer', callback); var obj = { hello: function(str){ alert('Hello '+ (str||'test')); } }; //输出test接口 exports('test', obj); });
第三步：设定扩展模块所在的目录，然后就可以在别的JS文件中使用
layui.config({ base: '/res/js/' //假设这是test.js所在的目录 }).extend({ //设定模块别名 test: 'test' //如果test.js是在根目录，也可以不用设定别名 ,test1: 'admin/test1' //相对于上述base目录的子目录 }); //使用test layui.use('test', function(){ var test = layui.test; test.hello('World!'); //弹出Hello World! }); //使用test1 layui.use('test1', function(){ var test = layui.test1; //…… });
全局配置
方法：layui.config(options)
layui.config({ base: 'js/' //你存放新模块的目录，注意，不是layui的模块目录 }).use('index'); //加载入口
layui弹出层
layer至今仍作为layui的代表作，它的爱众广泛并非偶然，而是这数年来的坚持、不弃的执念，讲那些不屑的眼光转化为应得的尊重，不断完善和维护、不断建设和提升社区服务，在web开发者的圈子里口口相传，乃至于成为今天的layui最强劲的源动力。目前，Layui已成为国内最多人使用的Web弹层组件，GitHub自然Start 5000+,官网累计下载量达50W+,大概有30万不同规模的Web平台使用过layer。
之所以列举上面这些数字，并非是在夸夸其谈，而是懂layer的人都知道，这是一种怎样不易的沉淀。而由于layer在layui体系中的位置比较特殊，甚至让很多人都是误以为layui=layer ui,所以再次强调layer只是作为layui的一个弹层模块，由于其用户基量数较大，所以至今把它作为独立组件来维护，不过要注意的是：无论是独立的layer，还是作为内置模块的layer，文档都以本页为准。
模块加载名称:layer,独立版本：http://layer.layui.com/
使用场景
由于layer可以独立使用，也可以通过Layui模块化使用。所以请按照您的实际需求来选择。
作为独立组件使用layer
<script src="layer.js"></script> <script> layer.msg('hello'); </script>
在layui中使用layer
layui.use('layer', function(){
var layer = layui.layer;
layer.msg('hello');
});
除了上面有所不同，其它都完全一致。
基础参数
我们提到的基础参数主要指调用方法时用到的配置项，如：layer.open({content:"}) layer.msg(",{time:3})等，其中的content和time即是基础参数，以键值形式存在，基础参数可合理应用于任何层类型中，您不需要所有都要去配置，大多数都是可选的。而其中的layer.open、layer.msg就是内置方法。需要注意的是：从2.3开始，无需通过layer.config来加载拓展模块。
type-基本层类型
类型：Number,默认：0
layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe）3（加载层）4（tips层）。若你caiyonglayer.open({type:1})方式调用，则type为必填项(信息框除外)
title - 标题
类型：Number，默认：0
layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
content - 内容
类型：String/DOM/Array，默认：''
content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。譬如：
/!* 如果是页面层 */ layer.open({ type: 1, content: '传入任意的文本或html' //这里content是一个普通的String }); layer.open({ type: 1, content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响 }); //Ajax获取 $.post('url', {}, function(str){ layer.open({ type: 1, content: str //注意，如果str是object，那么需要字符拼接。 }); }); /!* 如果是iframe层 */ layer.open({ type: 2, content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no'] }); /!* 如果是用layer.open执行tips层 */ layer.open({ type: 4, content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM });
skin - 样式类名
类型：String，默认：''
skin不仅允许你传入layer内置的样式class名，还可以传入您自定义的class名。这是一个很好的切入点，意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有：layui-layer-lanlayui-layer-molv，未来我们还会选择性地内置更多，但更推荐您自己来定义。以下是一个自定义风格的简单例子
//单个使用 layer.open({ skin: 'demo-class' }); //全局使用。即所有弹出层都默认采用，但是单个配置skin的优先级更高 layer.config({ skin: 'demo-class' }) //CSS body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;} body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7} body .demo-class .layui-layer-btn a{background:#333;} body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;} … 加上body是为了保证优先级。你可以借助Chrome调试工具，定义更多样式控制层更多的区域。
area - 宽高
类型：String/Array，默认：'auto'
在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: '500px'，高度仍然是自适应的。当你宽高都要定义时，你可以area: ['500px', '300px']
offset - 坐标
类型：String/Array，默认：垂直水平居中
offset默认情况下不用设置。但如果你不想垂直水平居中，你还可以进行以下赋值：
icon - 图标。信息框和加载层的私有参数
//eg1 layer.alert('酷毙了', {icon: 1}); //eg2 layer.msg('不开心。。', {icon: 5}); //eg3 layer.load(1); //风格1的加载
btn - 按钮
类型：String/Array，默认：'确认'
信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。当您只想自定义一个按钮时，你可以btn: '我知道了'，当你要定义两个按钮时，你可以btn: ['yes', 'no']。当然，你也可以定义更多按钮，比如：btn: ['按钮1', '按钮2', '按钮3', …]，按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}，以此类推。如：
//eg1 layer.confirm('纳尼？', { btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮 ,btn3: function(index, layero){ //按钮【按钮三】的回调 } }, function(index, layero){ //按钮【按钮一】的回调 }, function(index){ //按钮【按钮二】的回调 }); //eg2 layer.open({ content: 'test' ,btn: ['按钮一', '按钮二', '按钮三'] ,yes: function(index, layero){ //按钮【按钮一】的回调 } ,btn2: function(index, layero){ //按钮【按钮二】的回调 //return false 开启该代码可禁止点击该按钮关闭 } ,btn3: function(index, layero){ //按钮【按钮三】的回调 //return false 开启该代码可禁止点击该按钮关闭 } ,cancel: function(){ //右上角关闭回调 //return false 开启该代码可禁止点击该按钮关闭 } });
btnAlign - 按钮排列
类型：String，默认：r
你可以快捷定义按钮的排列位置，btnAlign的默认值为r，即右对齐。该参数可支持的赋值如下：
closeBtn - 关闭按钮
类型：String/Boolean，默认：1
layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0
shade - 遮罩
类型：String/Array/Boolean，默认：0.3
即弹层外区域。默认是0.3透明度的黑色背景（'#000'）。如果你想定义别的颜色，可以shade: [0.8, '#393D49']；如果你不想显示遮罩，可以shade: 0
shadeClose - 是否点击遮罩关闭
类型：Boolean，默认：false
如果你的shade是存在的，那么你可以设定shadeClose来控制点击弹层外区域关闭。
time - 自动关闭所需毫秒
类型：Number，默认：0
默认不会自动关闭。当你想自动关闭时，可以time: 5000，即代表5秒后自动关闭，注意单位是毫秒（1秒=1000毫秒）
id - 用于控制弹层唯一标识
类型：String，默认：空字符
设置该值后，不管是什么类型的层，都只允许同时弹出一个。一般用于页面层和iframe层模式
anim - 弹出动画
类型：Number，默认：0
我们的出场动画全部采用CSS3。这意味着除了ie6-9，其它所有浏览器都是支持的。目前anim可支持的动画类型有0-6 如果不想显示动画，设置 anim: -1 即可。另外需要注意的是，3.0之前的版本用的是 shift 参数
isOutAnim - 关闭动画 （layer 3.0.3新增）
类型：Boolean，默认：true
默认情况下，关闭层时会有一个过度动画。如果你不想开启，设置 isOutAnim: false 即可
maxmin - 最大最小化
类型：Boolean，默认：false
该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
fixed - 固定
类型：Boolean，默认：true
即鼠标滚动时，层是否固定在可视区域。如果不想，设置fixed: false即可
resize - 是否允许拉伸
类型：Boolean，默认：true
默认情况下，你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能，设置 false即可。该参数对loading、tips层无效
resizing - 监听窗口拉伸动作
类型：Function，默认：null
当你拖拽弹层右下角对窗体进行尺寸调整时，如果你设定了该回调，则会执行。回调返回一个参数：当前层的DOM对象
resizing: function(layero){ console.log(layero); }
scrollbar - 是否允许浏览器出现滚动条
类型：Boolean，默认：true
默认允许浏览器滚动，如果设定scrollbar: false，则屏蔽
maxWidth - 最大宽度
类型：Number，默认：360
请注意：只有当area: 'auto'时，maxWidth的设定才有效。
maxHeight - 最大高度
类型：Number，默认：无
请注意：只有当高度自适应时，maxHeight的设定才有效
zIndex - 层叠顺序
类型：，默认：19891014（贤心生日 0.0）
一般用于解决和其它组件的层叠冲突。