弹层组件layer的使用

layer是前端ui框架layui的弹层组件，可以单独使用也可以通过Layui模块化使用。 之前自己的项目中一直用aler弹窗，灵活性很差，并且不美观，因此准备单独引入layer做为项目弹框独立插件

操作步骤

首先是去layer独立版官网下载组件包。地址： http://layer.layui.com/ 2.下载解压完成后将整个layer文件夹引入项目任意目录中，并将layer.js 引入html文件中。不能单独引入layer.js,否则弹窗加载不到样式图片等资源，layer需要jQuery1.8以上版本的支持 之后就可以直接在js代码中使用弹窗，效果如下 在open方法中可以设置一些参数来个性化弹窗样式，其中’content‘可以设置为一个dom对象，弹窗内容就会显示该对象所对应的html文本，例如： function importProc() { layer.open({ type: 1, area: ['420px', '250px'], //宽高 title: '导入', content: $('#importProcLayer'), zIndex:1900, shade:0 }); }

如图 选取id属性为importProcLayer的div作为弹窗内容，并将其样式设置为隐藏。

layer 还可以弹出tips提示框，可用做输入错误的提示，如下示例：

layer.tips('请输入正整数','#pageSize',{tips:[1,'#666666']});

效果： 其中 pageSize为输入框值 1 代表提示框向上弹出，(同理 234代表右下左) #666666代表背景色。

layer 也可以弹出疑问提示框，可以添加不同按钮，对应不同的回调函数。示例如下：

layer.confirm('确定删除吗？', { btn: ['确定','取消'], //按钮 closeBtn: 0, zIndex:1900 }, function(){ alert("ok"); });

效果： 其中 closeBtn: 0 表示 不显示提示框右上角的关闭按钮，zindex表示提示框叠加顺序，点击确定会调用function()。要注意该回调函数是异步执行，若后续还有其他 操作需要注意调用顺序问题。

layer 的其他用法可以参考文档：https://www.layui.com/doc/modules/layer.html#tips