Layui 弹出层插件

Layui 弹出层插件
开发工具与关键技术： Visual Studio 2015 – Layui
作者：廖亚星
撰写时间：2019年 6 月4日

这段时间在做项目页面的搭建，在页面的操作中，会出现很多的弹出层，这能使用户在一个页面中执行更多的操作，而我的项目里面用的弹出层是Layui里面的弹出层插件。
Layui的弹出层插件可以作为独立组件使用，也可以Layui模块化使用
基本参数：
type—基本层类型
类型:Number
Layer提供了5种层类型，传入的值为0(信息框,默认)、1(页面层) 、2(iframe层) 、3(加载层)
4(tips层)
title—标题
类型：string/Array/Boolean，默认：信息
title支持三种类型的值，若传入的是普通的字符串，如title :‘标题’，那么只会改变标题文本；若还需要自定义标题区域样式，那么可以title: [‘文本’, ‘font-size:18px;’]，数组第二项可以写任意css样式；如果不想显示标题栏，可以title: false
content—内容
类型：string/DOM/Array，默认“”
content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同
area—宽高
类型：String/Array，默认：‘auto’
在默认状态下，layer是宽高都自动适应的，但想定义宽度时，可以area: ‘500px’，高度仍然是自适应的。当宽高都要定义时，可以area: [‘500px’, ‘300px’]来设置宽高的大小
offset—坐标
类型：String/Array，默认：垂直水平居中
offset默认情况下不用设置。但如果不想垂直水平居中，还可以进行以下赋值：
offset：‘auto’—垂直水平居中
offset：‘100px’—只定义top坐标，水平保持居中
offset：[‘100px’,‘50px’]—同时定义top,left坐标
offset：‘t’—快捷键设置顶部坐标
offset：‘lt’—快捷键设置左上角
……
closeBtn - 关闭按钮
类型：String/Boolean，默认：1
提供了两种风格的关闭按钮，可通过1和2来展示，如果不显示，则closeBtn: 0
scrollbar - 是否允许浏览器出现滚动条
类型：Boolean，默认：true
默认允许浏览器滚动，如果设定scrollbar: false，则屏蔽

下面有我做的一个弹出层–页面层
首先引用Layui插件


然后给它一个按钮，并在页面层里面设置内容

按钮样式

下面给它点击事件，并设置好参数

里面宽高设置为430px/500px,标题名称为付款 结算，里顶部50px，不允许拉伸，content里面为内容ID
点击后弹出层的效果