前端笔记html-layer使用

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.rhkb.cn/news/78370.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网络安全之原型链污染

目录&#xff1a; 目录&#xff1a; 一、概念 二、举例 三、 实操了解 总结 四、抛出原题&#xff0c;历年原题复现 第一题&#xff1a; 五、分析与原理 第二题&#xff1a; 八、分析与原理 九、具体操作&#xff0c;payload与结果 结果&#xff1a; 一、概念 Java…

《面试1v1》ElasticSearch基础

&#x1f345; 作者简介&#xff1a;王哥&#xff0c;CSDN2022博客总榜Top100&#x1f3c6;、博客专家&#x1f4aa; &#x1f345; 技术交流&#xff1a;定期更新Java硬核干货&#xff0c;不定期送书活动 &#x1f345; 王哥多年工作总结&#xff1a;Java学习路线总结&#xf…

阿里云快速部署开发环境 (Apache + Mysql8.0)

本文章的内容截取于云服务器管理控制台提供的安装步骤&#xff0c;再整合前人思路而成&#xff0c;文章末端会提供原文连接 ApacheMysql 8.0部署MySQL数据库&#xff08;Linux&#xff09;步骤一&#xff1a;安装MySQL步骤二&#xff1a;配置MySQL步骤三&#xff1a;远程访问My…

Redis压缩列表

区分一下 3.2之前 Redis中的List有两种编码格式 一个是LINKEDLIST 一个是ZIPLIST 这个ZIPLIST就是压缩列表 3.2之后来了一个QUICKLIST QUICKLIST是ZIPLIST和LINKEDLIST的结合体 也就是说Redis中没有ZIPLIST和LINKEDLIST了 然后在Redis5.0引入了LISTPACK用来替换QUiCKLIST中的…

vue整合脑图编辑管理系统-kitymind百度脑图

前言 项目为前端vue项目&#xff0c;把kitymind百度脑图整合到前端vue项目中&#xff0c;显示了脑图的绘制&#xff0c;编辑&#xff0c;到处为json&#xff0c;png&#xff0c;text等格式的功能 文章末尾有相关的代码链接&#xff0c;代码只包含前端项目&#xff0c;在原始的…

线性代数 | 机器学习数学基础

前言 线性代数&#xff08;linear algebra&#xff09;是关于向量空间和线性映射的一个数学分支。它包括对线、面和子空间的研究&#xff0c;同时也涉及到所有的向量空间的一般性质。 本文主要介绍机器学习中所用到的线性代数核心基础概念&#xff0c;供读者学习阶段查漏补缺…

Visual Studio 2022的MFC框架——应用程序向导

我是荔园微风&#xff0c;作为一名在IT界整整25年的老兵&#xff0c;今天我们来重新审视一下Visual Studio 2022开发工具下的MFC框架知识。 MFC(Microsoft Foundation Class&#xff0c;微软基础类库&#xff09;是微软为了简化程序员的开发工作所开发的一套C类的集合&#xf…

roop 视频换脸

roop: one click face swap. 只用一张人脸图片&#xff0c;就能完成视频换脸。 项目地址&#xff1a; https://github.com/s0md3v/roopColab 部署&#xff1a; https://github.com/dream80/roop_colab 本文是本地部署的实践记录。 环境基础 OS: Ubuntu 22.04.2 LTSKernel: 5…

GPIO实验

一、GPIO GPIO&#xff08;General-purpose input/output&#xff09;即通用型输入输出&#xff0c;GPIO可以控制连接在其之上的引脚实现信号的输入和输出 芯片的引脚与外部设备相连&#xff0c;从而实现与外部硬件设备的通讯、控制及信号采集等功能 LED实验步骤 最终目的&am…

2020-2023中国高等级自动驾驶产业发展趋势研究

1.1 概念界定 2020-2023中国高等级自动驾驶产业发展趋势研究Trends in China High-level Autonomous Driving from 2020 to 2023自动驾驶发展过程中&#xff0c;中国出现了诸多专注于研发L3级以上自动驾驶的公司&#xff0c;其在业界地位也越来越重要。本报告围绕“高等级自动…

vue2-diff算法

1、diff算法是什么&#xff1f; diff算法是一种通过同层的树节点进行比较的高效算法。 其有两个特点&#xff1a; 比较只会在同层级进行&#xff0c;不会跨层级进行。 在diff比较的过程中&#xff0c;循环从两边向中间比较。 diff算法在很多场景中都有应用&#xff0c;在vue中&…

mac电脑访问windows共享文件夹连接不上(设置445端口)

前提&#xff1a;首先需要保证mac和windows都在同一局域网内&#xff0c;如果不在肯定是连不上的&#xff0c;就不用往下看了。 事情是这样的&#xff0c;公司入职发了mac电脑&#xff0c;但是我是window重度用户&#xff0c;在折腾mac的过程中&#xff0c;有许多文件需要从wi…

【Jenkins】Jenkins 安装

Jenkins 安装 文章目录 Jenkins 安装一、安装JDK二、安装jenkins三、访问 Jenkins 初始化页面 Jenkins官网地址&#xff1a;https://www.jenkins.io/zh/download/ JDK下载地址&#xff1a;https://www.oracle.com/java/technologies/downloads/ 清华源下载RPM包地址&#xff…

vim、awk、tail、grep的使用

vim命令 $定位到光标所在行的行末^定位到光标所在行的行首gg定位到文件的首行G定位到文件的末行dd删除光标所在行ndd删除n行&#xff08;从光标所在行开始&#xff09;D删除光标所在行&#xff0c;使之变为空白行x删除光标所在位置字符nx删除n个字符&#xff0c;从光标开始向后…

使用Python将Word文档转换为PDF的方法

摘要&#xff1a; 文介绍了如何使用Python编程语言将Word文档转换为PDF格式的方法。我们将使用python-docx和pywin32库来实现这个功能&#xff0c;这些库提供了与Microsoft Word应用程序的交互能力。 正文&#xff1a; 在现实生活和工作中&#xff0c;我们可能会遇到将Word文…

召唤神龙打造自己的ChatGPT

在之前的两篇文章中&#xff0c;我介绍了GPT 1和2的模型&#xff0c;并分别用Tensorflow和Pytorch来实现了模型的训练。具体可以见以下文章链接&#xff1a; 1. 基于Tensorflow来重现GPT v1模型_gzroy的博客-CSDN博客 2. 花费7元训练自己的GPT 2模型_gzroy的博客-CSDN博客 有…

揭秘女程序员找男友的首选职业,你猜是哪个?

大家好&#xff0c;这里是程序员晚枫。 大家有没有发现&#xff1a;身边单身的男程序员很多&#xff0c;而单身的女程序员更多&#xff1f; 今天我们就来一起讨论一下&#xff0c;女程序员适合什么职业的男生&#xff1f;01 推荐 女程序员适合什么职业的男生&#xff0c;这…

一篇文章教会你一个优秀的程序员如何维护好自己的电脑

程序员如何维护好自己的电脑 1. 程序员的电脑种类都有哪些2. 硬件如何维护2.1 开关机问题2.2 Windows更新问题2.3 笔记本充电和电池问题2.4 笔记本清灰问题 3. 系统及软件维护3.1 杀毒软件和垃圾清理问题3.2 磁盘分盘问题3.3 浏览器和搜索引擎的选择3.4 系统备份和PE盘的使用 总…

ELK、ELFK日志分析系统

菜单一、ELK简介1.1 ELK组件说明1.1.1 ElasticSearch1.1.2 Kiabana1.1.3 Logstash 1.2 可以添加的其它组件1.2.1 Filebeat1.2.2 缓存/消息队列&#xff08;redis、kafka、RabbitMQ等&#xff09;1.2.3 Fluentd 1.3 为什么要用ELK1.4 完整日志系统的基本特征1.5 ELK 的工作原理 …

2023年华数杯数学建模A题思路代码分析 - 隔热材料的结构优化控制研究

# 1 赛题 A 题 隔热材料的结构优化控制研究 新型隔热材料 A 具有优良的隔热特性&#xff0c;在航天、军工、石化、建筑、交通等 高科技领域中有着广泛的应用。 目前&#xff0c;由单根隔热材料 A 纤维编织成的织物&#xff0c;其热导率可以直接测出&#xff1b;但是 单根隔热…