Layui 弹出层插件

Layui 弹出层插件Layui弹出层插件开发工具与关键技术:VisualStudio2015–Layui作者:廖亚星撰写时间:2019年6月4日这段时间在做项目页面的搭建,在页面的操作中,会出现很多的弹出层,这能使用户在一个页面中执行更多的操作,而我的项目里面用的弹出层是Layui里面的弹出层插件。Layui的弹出层插件可以作为独立组件使用,也可以Layui模块化使用基本参数:type—…

大家好,又见面了,我是你们的朋友全栈君。

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
点击后弹出层的效果
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/131017.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号