前端笔记html-layer使用

news2025/1/5 20:01:55

layer.open方法

    layer.open({
        type:2, //可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
        title: title,
        content:['url?id=' + id,'no'],  // url请求地址返回页面, no->yes显示进度条
        area:['650px','585px'],
        btn: ['确定', '取消'],
        yes: function(index, layero){
            var iframeWin = window[layero.find('iframe')[0]['name']];
            // view方法在弹窗中实现
            // iframeWin.view();
            // 关闭自身弹窗
            // layer.close(index);
        },
        btnAlign:'c'
    });

父页面获取layer.open弹窗中的值

1、获取input中的值

content页面

<div class="kjSelectDiv" style="padding: 0 10px;margin-top:20px">
    <div class="input-group">
        <input type="text" class="form-control search-param wl-date layui-input" name="kjMonth" id="kjMonth"
            onFocus="WdatePicker({dateFmt: \'yyyy-MM\', maxDate:\'#F{$dp.$D(\\\'statisticsMaxDay\\\',{d:0});}\'})" />
    </div>
</div>

父页面

layer.open({
    type:1,
    title:"选择时间",
        content:'    <div class="kjSelectDiv" style="padding: 0 10px;margin-top:20px">\n' +
            '        <div class="input-group">\n' +
            '            <input type="text" class="form-control search-param wl-date layui-input" name="kjMonth" id="kjMonth"\n' +
            '                   onFocus="WdatePicker({dateFmt: \'yyyy-MM\', maxDate:\'#F{$dp.$D(\\\'statisticsMaxDay\\\',{d:0});}\'})" />\n' +
            '        </div>\n' +
            '    </div>',
        area:['250px','200px'],
        btn: ['确定', '取消'],
    btnAlign:'c',
    yes:(index,layero)=>{
            var kjMonth = $('[name=kjMonth]').val();
            console.log(kjMonth);
    },
    cancel:(index, layero)=>{}
})

2、获取select中选中的值

网上看到的, 顺便记录下

content页面

<select id="groupId" name="groupId" xm-select="group">
      <span th:each="info : ${groupList}">
<option th:text="${info.name}" th:value="${info.id}"></option>
      </span>
  </select>

父页面

layer.open({
    type: 2,
    title: "标题",
    area: ['600px', '500px'],
    content: "/page/layerOpen", //请求后端返回页面地址
    btn: ['提交', '取消'],
    yes: function(index, layero){
        //得到iframe页的窗口对象,执行iframe页的方法:
        var iframeWin = window[layero.find('iframe')[0]['name']];
        // 获取页面中xm-select属性为group的下拉选择框选中的值
        var selectGroupData = iframeWin.layui.formSelects.value('group', 'val');
        console.log(selectGroupData);

        // 或
        var kjMonth = $('[name=groupId]').val();
    }
})

layer设置显示位置

设置显示位置可以通过offset进行设置,

设置代码:

    layer.open({
                type: 2, 
                  content: "content.html",
                 offset:"rb"
            })

后续待更新..

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/842419.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

高抗干扰LCD液晶屏驱动芯片,低功耗的特性适用于水电气表以及工控仪表类产品

VK2C23是一个点阵式存储映射的LCD驱动器&#xff0c;可支持最大224点&#xff08;56SEGx4COM&#xff09;或者最大416点&#xff08;52SEGx8COM&#xff09;的LCD屏。单片机可通过I2C接口配置显示参数和读写显示数据&#xff0c;也可通过指令进入省电模式。其高抗干扰&#xff…

怎么进行流程图制作?用这个工具制作很方便

怎么进行流程图制作&#xff1f;流程图是一种非常有用的工具&#xff0c;可以帮助我们更好地理解和展示各种复杂的业务流程和工作流程。它可以将复杂的过程简化为易于理解的图形和文本&#xff0c;使得人们更容易理解和跟踪整个流程。因此&#xff0c;制作流程图是在日常工作中…

用低代码构建高效敏捷工作流

随着行业业务发展及业务流程诉求的增长&#xff0c;企业信息资源越来越表现出一种异构分布、松散耦合的特点。实现大规模、异构、分布式执行环境&#xff0c;使得相互关联的任务能够高效运转成为了业务管理的强诉求。以事件驱动和数据驱动来进行应用系统构建也就变得更加实效。…

UE中低延时播放RTSP监控视频解决方案

第1章 方案简介 1.1 行业痛点 在各种智慧城市、智慧社区、智慧水利、智慧矿山等数字孪生项目中&#xff0c;经常使用通UE来开发三维可视化场景。在这些场景中通常都需要把现场的各种监控视频在UE的可视化场景中接入&#xff0c;主要包含海康威视、大华、宇视、华为等众多监控…

SpringBoot实现文件记录日志,日志文件自动归档和压缩

&#x1f60a; 作者&#xff1a; Eric &#x1f496; 主页&#xff1a; https://blog.csdn.net/weixin_47316183?typeblog &#x1f389; 主题&#xff1a;SpringBoot实现文件记录日志&#xff0c;日志文件自动归档和压缩 ⏱️ 创作时间&#xff1a; 2023年08月06日 文章目…

[webpack] 基本配置 (一)

文章目录 1.基本介绍2.功能介绍3.简单使用3.1 文件目录和内容3.2 下载依赖3.3 启动webpack 4.基本配置4.1 五大核心概念4.2 基本使用 1.基本介绍 Webpack 是一个静态资源打包工具。它会以一个或多个文件作为打包的入口, 将我们整个项目所有文件编译组合成一个或多个文件输出出去…

ad+硬件每日学习十个知识点(23)23.8.3(LDO 设计实例)(涉及到自控没听懂,学完自控再回来看)

文章目录 1.输入电容的选取&#xff08;两个&#xff0c;一个大电容&#xff0c;一个小电容&#xff09;2.输出电容的选取&#xff08;两个&#xff0c;一个大电容&#xff0c;一个小电容&#xff09;3.有些LDO需要输出的最小负载电流&#xff0c;所以需要接一个下拉电阻。4. 1…

使用TransBigData快速高效地处理、分析、挖掘出租车GPS数据

01、TransBigData简介 TransBigData是一个为交通时空大数据处理、分析和可视化而开发的Python包。TransBigData为处理常见的交通时空大数据&#xff08;如出租车GPS数据、共享单车数据和公交车GPS数据等&#xff09;提供了快速而简洁的方法。TransBigData为交通时空大数据分析的…

JavaScript的对象+内置对象(Math+Date日期+数组+字符串)

一.创建对象 对象是由属性和方法组成的 创建对象的三种方法: 1.利用字面量创建对象 var obj{uname : 张三疯 ,age : 18 ,sex : 男 ,sayHi : function(){console.log(hi~);}} 里面的属性或者方法采用键值对的形式多个属性或者方法用逗号隔开方法冒号后面跟的是一个匿名…

第四次作业 运维高级 构建 LVS-DR 群集和配置nginx负载均衡

1、基于 CentOS 7 构建 LVS-DR 群集。 LVS-DR模式工作原理 首先&#xff0c;来自客户端计算机CIP的请求被发送到Director的VIP。然后Director使用相同的VIP目的IP地址将请求发送到集群节点或真实服务器。然后&#xff0c;集群某个节点将回复该数据包&#xff0c;并将该数据包…

如何创建51单片机KEIL工程

如何创建51单片机KEIL工程步骤&#xff1a; &#xff08;1&#xff09;打开keil软件&#xff0c;点击工具栏-Project&#xff0c;选择创建新的工程&#xff1b; &#xff08;2&#xff09;然后给工程命名&#xff0c;文章以project为例&#xff0c;然后点击保存 &#xff08…

ubuntu 暂时不能解析域名 解决办法

需要修改系统DNS 打开终端&#xff1a;输入 sudo vi /etc/resolv.conf 回车 在打开的配置文件中添加DNS信息 nameserver 114.114.114.114 nameserver 8.8.8.8 保存退出&#xff0c;重启系统即可。

一、MySql前置知识

文章目录 一、什么是数据库&#xff08;一&#xff09;存储数据用文件就可以了&#xff0c;为什么还要弄个数据库?&#xff08;二&#xff09;数据库存储介质&#xff1a;&#xff08;三&#xff09;主流数据库 二、数据库基本操作&#xff08;一&#xff09;连接服务器&#…

ArcGIS在洪水灾害普查、风险评估及淹没制图中应用教程

详情点击链接&#xff1a;ArcGIS在洪水灾害普查、风险评估及淹没制图中应用教程 一&#xff1a;洪水普查技术规范 1.1 全国水旱灾害风险普查实施方案 1.2 洪水风险区划及防治区划编制技术要求 1.3 山丘区中小河流洪水淹没图编制技术要求 二&#xff1a;ArcGIS及数据管理 …

为什么说CSPM考的越早越好?

一、CSPM 含金量怎么样&#xff0c;考了有什么用&#xff1f; 1、国家标准做背书&#xff08;gj认可&#xff09; CSPM 更符合项目管理从业者在能力、经验上的需求&#xff0c;有政策的支持&#xff0c;相关理论知识在国内项目管理领域更加容易落地、更实用、更可持续性。 2…

一张图理解非对称加密解密过程

非对称加密算法需要两个密钥&#xff1a;公开密钥&#xff08;publickey&#xff09;和私有密钥&#xff08;privatekey&#xff09;。公开密钥与私有密钥是一对&#xff0c;如果用公开密钥对数据进行加密&#xff0c;只有用对应的私有密钥才能解密&#xff1b;如果用私有密钥对…

postgresql 使用之 存储架构 触摸真实数据的存储结构以及组织形式,存入数据库的数据原来在这里

存储架构 ​专栏内容&#xff1a; postgresql内核源码分析 手写数据库toadb 并发编程 个人主页&#xff1a;我的主页 座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物. 概述 postgresql 数据库服务运行时&#xff0c;数据在磁…

对返回引用函数的进一步解释

#include <iostream> #include <string> using namespace std; class Box { public:Box(string name,int age):name(name),age(age){}string& getname() //返回引用的函数{cout << "&name: " << (int)&name << endl;retur…

Maven入职学习

一、什么是Maven&#xff1f; 概念&#xff1a; Maven是一种框架。它可以用作依赖管理工具、构建工具。 它可以管理jar包的规模、jar包的来源、jar包之间的依赖关系。 它的用途就是管理规模庞大的jar包&#xff0c;脱离IDE环境执行构建操作。 具体使用&#xff1a; 工作机…

Clickhouse 存储引擎

一、常用存储引擎分类 1.1 ReplacingMergeTree 这个引擎是在 MergeTree 的基础上&#xff0c;添加了”处理重复数据”的功能&#xff0c;该引擎和MergeTree的不同之处在于它会删除具有相同主键的重复项。 特点: 1使用ORDERBY排序键作为判断重复的唯一键 2.数据的去重只会在合并…