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
点击后弹出层的效果

Layui 弹出层插件相关推荐

layui弹出层：使用icon图标小结
文章目录 layui弹出层:icon图标小结表格示下: 调用代码 · 效果图 · 示下: layui弹出层:icon图标小结 layui的弹框插件layer中,有很多不同场景需要的弹框icon图标, ...
layer——极简的jquery弹出层插件
官网:http://layer.layui.com/ 作者:贤心 jquery layer是layUI库的成员,一直致力于为web开发提供动力. jquery layer弹出层插件支持单击弹出,自动 ...
如何解决layui弹出层闪退的问题
问题: 今天用layui的弹出层插件,发现绑定弹出层到按钮,打开弹窗会闪退. 原因:在form表单中使用了Button按钮,点击的时候会触发默认事件,而form的action我没填,所以就是弹出层会闪 ...
如何更改layui弹出层样式
首先引入插件: js: <script src="./layui/src/layui.js"></script> 然后设置layui弹出层内容: layer ...
layUI弹出层组件使用
首先官网下载layUI或者下载layer.js组件也可以 layer.js组件官网链接 layer 弹出层组件 - jQuery 弹出层插件 (layuiweb.com) 独立组件使用需要引入JQue ...
layui弹出层闪退，layer弹出层闪退，layer弹出层坑
这两天用layui的弹出层插件,发现两奇怪的问题: 1.弹窗打开事件还未绑定到任何按钮,可是点击form表单中的按钮可以打开我定义的弹出层 2.绑定弹出层到按钮,打开弹窗闪退后面发现真如参考博文所说 ...
模拟layui弹出层
以前觉得自己手写一个类似layui的弹出层是挺遥远的事,因为完全没有头绪,即便在layui官网知道layui使用的都是C3动画之前试过控制width:0;height:0来做动画,结果惨不忍睹,直到 ...
html 弹出层插件,jQuery弹出层插件(原创)
插件描述:简约的jQuery弹出层插件更新时间:2020-01-17 23:37:28 更新说明:版本v4.3.0 1.修复最大化可拖动.改变大小的问题 2.去除对于图片的依赖 3.更新拖动插件 4 ...
layui弹出层：皮肤扩展（文档解读）
layui弹出层:皮肤扩展(文档解读) layui弹出层:样式自定义官方文档:https://layer.layui.com/ 皮肤扩展 · 官方教程: 官方文档:https://layer.lay ...

Layui 弹出层插件

Layui 弹出层插件相关推荐

最新文章

热门文章