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)
blank

相关推荐

  • idea设置背景黑色_idea主题样式设置

    idea设置背景黑色_idea主题样式设置1、File=>Settings2、Appearance=>Darcula

  • 支付宝功能结构图_阿里双十一晚会

    支付宝功能结构图_阿里双十一晚会转自:https://blog.csdn.net/itfly8/article/details/111027014简介:汤波(甘盘),男,1989/02/21,硕士学历。高中开始编程,热爱技术,深信技术让世界更美好。对前沿技术一直保持饥饿感,热衷于创新和革新,让系统体制更为高效和人性化,也深知一个人强走的快,一个团体强才能走的远。在技术团队建设(团队招聘和组建、梯队梯度建设)、技术栈管理(包含技术选型、技术规范建设、软件体系规划)和项目研发管理(软件工程管理、开发效能和质量管理)方面有着较为丰富的实..

    2022年10月19日
  • 知识蒸馏(Knowledge Distillation)

    知识蒸馏(Knowledge Distillation)1、DistillingtheKnowledgeinaNeuralNetworkHinton的文章"DistillingtheKnowledgeinaNeuralNetwork"首次提出了知识蒸馏(暗知识提取)的概念,通过引入与教师网络(teachernetwork:复杂、但推理性能优越)相关的软目标(soft-target)作为totalloss的一部分,以诱导学…

  • Unity3d快速入门[通俗易懂]

    Unity3d快速入门[通俗易懂]https://www.zhihu.com/question/313621072Unity3d如何快速入门前言进入一个领域,最直接有效的方法就是,寻找相关综述性文章,首先你需要对你入门的领域有个概括性的了解,这些包括:1、主流的学习社区与网站。2、该领域的知名大牛与热心分享的从业者。3、如何有效的激励自己持续学习—主要是动手实践因此,总结一下Unity相关学习资源,可能有些不足,欢迎大家指正修改,一起成长!授人与鱼,不如授人与渔!一、Unity官方学习资源1、【Unity官.

  • 格雷码的实现[通俗易懂]

    格雷码的实现[通俗易懂]问题:产生n位元的所有格雷码。格雷码(GrayCode)是一个数列集合,每个数使用二进位来表示,假设使用n位元来表示每个数字,任两个数之间只有一个位元值不同。例如以下为3位元的格雷码: 000001011010110111101100。如果要产生n位元的格雷码,那么格雷码的个数为2^n.假设原始的值从0开始,格雷码产生的规律是:第一步,改变最右边的

  • javah 详解_java entity

    javah 详解_java entity1javah–help帮助说明乱码说明javah–help输出内容采用的是utf-8编码,在cmd打开可能出现乱码,因此执行指令chcp936,指定编码字符集(cmd默认的字符编码集是GBK)2javah参数说明javah–help用法:javah[options]<classes>其中,…

发表回复

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

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