关于 layui 弹出一个 DOM 表单的问题
案例: 假设用 layer.msg 去弹出一个dom表单:
由官方文档可知,应该定义一个div,设置其 id 为某个值,然后写在 content 中:

但我们只想在点击按钮时候显示 div 表单,那么肯定要先隐藏起来:

然后在点击按钮时候显示:


但注意必须在关闭对话框时候把div再隐藏起来,这个我想大家都容易知道,因为 layui 框架肯定会调整你的css。
BUG就在于:最后的隐藏代码必须写在end方法中,而不能写在cancel按钮点击事件的 layer.closeAll() 之后,不然点击关闭时会出现很奇怪的闪烁现象:首先弹出层内容为空(被隐藏了),然后弹框才关闭,这不是我们想要的效果,而应该先关闭,再隐藏。
一定要仔细阅读官方文档!

结果:
关于 layui 弹出一个 DOM 表单的问题的更多相关文章
- ios手机弹出层上表单的操作,收起键盘焦点错乱的问题
今天遇到了ios手机下 弹出层上form表单 当收起键盘后,焦点错乱,无法再操作的问题 解决办法 function device() { const u = navigator.userAgent; ...
- JEECG弹出框提交表单
一.设备主页面(deviceMain.jsp) <t:dgToolBar title="编辑设备" icon="icon-edit" url=" ...
- vue iview modal弹出框 form表单验证
一.ref="addApply" :model="addApply" :rules="ruleValidate" 不要忘记prop 二. ...
- 数据表格,查询、导出共用一个form表单,实现文件流方式下载
在开发中遇到问题是这样的: 在维护老的管理系统的过程中,老板说让加导出功能:项目中,查询的筛选条件是用的表单提交的方式写的. 解决方案有两种: 一.用ajax方式导出 var array = $('# ...
- layui弹出层之应用实例讲解
从酒店管理系统到智能门锁及其现在的资源共享平台,layui框架,我们团队用的比较多的就是这个layui弹出层. layui弹出层,除了页面iframe层我们比较常用还有就是表单校验和其他相关的友好提示 ...
- ASP.NET查询页面设置form的action属性只弹出一个页面,并且每次将页面设置到最前
原文:ASP.NET查询页面设置form的action属性只弹出一个页面,并且每次将页面设置到最前 背景 当数据量大.查询条件复杂,多样多的时候,我们可能需要单独做一个查询界面,当用户选择设置了相关的 ...
- Layui弹出层详解
今天空了学习一下弹出层 还是一步步展示把 首先,layer可以独立使用,也可以通过Layui模块化使用.我个人一直是用的模块化的 所以下面素有的都是基于模块化的. 引入好相关文件就可以开始啦 今天放 ...
- Layui弹出层、日期和时间选择、即时通讯、分页
Layui弹出层.日期和时间选择.即时通讯.分页 弹层组件文档 - layui.layer 对于弹出层的感觉是:layer 至今仍作为 layui 的代表作,她的受众广泛并非偶然,而是这数年来的坚持. ...
- Layui动画、按钮、表单
Layui动画.按钮.表单 在实用价值的前提之下,我们并没有内置过多花俏的动画.而他们同样在 layui 的许多交互元素中,发挥着重要的作用.layui 的动画全部采用 CSS3,因此不支持ie8和部 ...
- 从点击Button到弹出一个MessageBox, 背后发生了什么
思考一个最简单的程序行为:我们的Dialog上有一个Button, 当用户用鼠标点击这个Button时, 我们弹出一个MessageBox. 这个看似简单的行为, 谁能说清楚它是如何运行起来的,背后究 ...
随机推荐
- redis geo 做距离计算排序分页
redis geo 做距离计算排序分页 // 添加经纬度和店铺id geoadd store_list lng lat store_id 计算距离排序和生成临时文件 georadius store_l ...
- 配置PostMan以访问、连接D365 / Dataverse环境
有人提出个问题说国内21V环境能否使用postman连接CRM? 官方链接:https://learn.microsoft.com/en-us/power-apps/developer/data-pl ...
- RayLink远程控制软件:叮~你收到一份年度关键词报告
叮~~~ 今天是12月31日,2022年的最后一天.今天过后,明天就是2023年啦!R君提前恭祝大家新年快乐,温情满满的跨年之际,RayLink感恩2022遇见大家,2023还请大家多多关照~ 202 ...
- pat乙级1011 A+B 和C
#include<stdio.h> #include<stdlib.h> #include<string.h> #include<math.h> int ...
- List集合转换成数组
我现在有个需求:将File集合转换成MultipartFile数组结构 然后我就开始在网上开启了List转换到数组之旅. 首先来看一个例子 ArrayList<String> list=n ...
- Linux下mysql安装教程
一 环境准备 1.检查是否已经安装过mysql,执行命令 [root@localhost /]# rpm -qa | grep mysql 从执行结果,可以看出我们已经安装了mysql-libs-5. ...
- Cupboard and Balloons CodeForces - 342C
Cupboard and Balloons CodeForces - 342C 找到不变的点 抓住不确定的点进行讨论 #include<iostream> #include<cmat ...
- FTP为什么越来越不好用了?要如何替代?
FTP相信很多人都不陌生,作为世界范围内第一个文件传输协议,FTP解决了互联网文件传输需求,至今已被广泛使用30多年.但很多人现在慢慢发现,FTP越来越不好用了,或者说越来越无法满足自己需求了,这是为 ...
- Java流程控制之顺序结构+选择结构
顺序结构 Java的基本结构就是顺序结构,除非特别指明,否则就按照顺序一句一句执行. 顺序结构是最简单的算法结构. 语句与语句之间,框与框之间是按从上到下的顺序进行的,它是有若干个依次执行的处理步骤组 ...
- 学习canvas的vscode提示问题
在代码中加入/** @type {HTMLCanvasElement} */ 即可 1 <script> 2 /** @type {HTMLCanvasElement} */ 3 let ...