大家好,又见面了,我是你们的朋友全栈君。
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账号...