案例: 假设用  layer.msg 去弹出一个dom表单:

由官方文档可知,应该定义一个div,设置其 id 为某个值,然后写在 content 中:

layer弹层组件开发文档 - Layui

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

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

但注意必须在关闭对话框时候把div再隐藏起来,这个我想大家都容易知道,因为 layui 框架肯定会调整你的css。

BUG就在于:最后的隐藏代码必须写在end方法中,而不能写在cancel按钮点击事件的 layer.closeAll() 之后,不然点击关闭时会出现很奇怪的闪烁现象:首先弹出层内容为空(被隐藏了),然后弹框才关闭,这不是我们想要的效果,而应该先关闭,再隐藏。

一定要仔细阅读官方文档!

结果:

关于 layui 弹出一个 DOM 表单的问题的更多相关文章

  1. ios手机弹出层上表单的操作,收起键盘焦点错乱的问题

    今天遇到了ios手机下 弹出层上form表单 当收起键盘后,焦点错乱,无法再操作的问题 解决办法 function device() { const u = navigator.userAgent; ...

  2. JEECG弹出框提交表单

    一.设备主页面(deviceMain.jsp) <t:dgToolBar title="编辑设备" icon="icon-edit" url=" ...

  3. vue iview modal弹出框 form表单验证

    一.ref="addApply" :model="addApply" :rules="ruleValidate"   不要忘记prop 二. ...

  4. 数据表格,查询、导出共用一个form表单,实现文件流方式下载

    在开发中遇到问题是这样的: 在维护老的管理系统的过程中,老板说让加导出功能:项目中,查询的筛选条件是用的表单提交的方式写的. 解决方案有两种: 一.用ajax方式导出 var array = $('# ...

  5. layui弹出层之应用实例讲解

    从酒店管理系统到智能门锁及其现在的资源共享平台,layui框架,我们团队用的比较多的就是这个layui弹出层. layui弹出层,除了页面iframe层我们比较常用还有就是表单校验和其他相关的友好提示 ...

  6. ASP.NET查询页面设置form的action属性只弹出一个页面,并且每次将页面设置到最前

    原文:ASP.NET查询页面设置form的action属性只弹出一个页面,并且每次将页面设置到最前 背景 当数据量大.查询条件复杂,多样多的时候,我们可能需要单独做一个查询界面,当用户选择设置了相关的 ...

  7. Layui弹出层详解

    今天空了学习一下弹出层 还是一步步展示把 首先,layer可以独立使用,也可以通过Layui模块化使用.我个人一直是用的模块化的 所以下面素有的都是基于模块化的. 引入好相关文件就可以开始啦  今天放 ...

  8. Layui弹出层、日期和时间选择、即时通讯、分页

    Layui弹出层.日期和时间选择.即时通讯.分页 弹层组件文档 - layui.layer 对于弹出层的感觉是:layer 至今仍作为 layui 的代表作,她的受众广泛并非偶然,而是这数年来的坚持. ...

  9. Layui动画、按钮、表单

    Layui动画.按钮.表单 在实用价值的前提之下,我们并没有内置过多花俏的动画.而他们同样在 layui 的许多交互元素中,发挥着重要的作用.layui 的动画全部采用 CSS3,因此不支持ie8和部 ...

  10. 从点击Button到弹出一个MessageBox, 背后发生了什么

    思考一个最简单的程序行为:我们的Dialog上有一个Button, 当用户用鼠标点击这个Button时, 我们弹出一个MessageBox. 这个看似简单的行为, 谁能说清楚它是如何运行起来的,背后究 ...

随机推荐

  1. java基于ssm框架开发的公交查询系统源码公交系统源码公交路线查询项目有论文

    简介 java基于ssm的公交路线查询系统,用户可以查询公交站点公交车路线以及公交换乘方案,还可以查看公交车路线地图,以及该站点所有的公交车路线. 演示视频: https://www.ixigua.c ...

  2. Finance财务软件(如何运行该软件)

    下载软件 首先,去gitHub下载该项目的release,尽量下载最新版本:https://github.com/edwardorchis/finance/releases.国内也可以在码云下载htt ...

  3. C语言-猜数游戏

    整理文件发现以前写的C语言猜数游戏 1-效果演示 2-程序 #include <stdio.h> #include <stdlib.h> #include <time.h ...

  4. vuexy full-wersion项目安装报错问题处理

    npm install grpc@1.23.3 --ignore-scripts npm rebuild node-sass

  5. golang实现请求cloudflare修改域名A记录解析

    现在有些DNS解析要收费,国内的几个厂商需要实名制.下面给出golang请求cloudflare修改域名A记录解析的代码. 准备工作: 在域名购买服务商处,将dns解析服务器改为cloudflare的 ...

  6. Java-token生成

    1. 引入jar包 <dependency> <groupId>com.auth0</groupId> <artifactId>java-jwt< ...

  7. B - WeirdSort

    B - WeirdSort 思路:经过认真的审题,你会发现,这只是个冒泡的变形,我们建立两个数组,然后用一个数组里面的数字确定位置,然后冒泡就行了.最后抖机灵用了个is_sorted,判断数组里面数字 ...

  8. Jmeter添加while控制器

    通过添加while控制器,可以实现条件+循环判断,使while控制器内的子线程根据之前线程的返回(while控制器内外变量皆可)进行触发+循环的控制. 原理如下:通过Condition判断条件语句是否 ...

  9. 苹果公司对蓝牙免提AT指令的扩充

    介绍 苹果公司对蓝牙HF profile进行了一些HF AT指令的扩充.不过为了兼容起见,尽量实现HF标准规范规定的内容,如果标准规范没有规定相应的内容,为了适配苹果设备新增的功能,还是可以适应苹果公 ...

  10. ??????FormDataAccess

    using Genersoft.Fms.Center.Pub.Com;using Genersoft.Platform.AdpBizIntegration.Entity;using Genersoft ...