弹出模态框

article/2025/8/18 17:31:31

想必大家都知道弹出层的重要性,在很多的地方都能用到这个方法,所以说这种是非常的普遍的实用性,在大家编写过程中也是很常见的模态框以及弹出层,基本也是一个概念。

插件不可缺少

1.多窗口模式 + 层叠置顶 + Esc 关闭

为什么是说多窗口模式呢,因为他的功能是可以扩大的!! 

扩大之后呢,还有他的子模态框,继续弹出这个模式,所以说这个是多窗口模式。

代码如下

  <button data-method="setTop" class="layui-btn">多窗口模式 + 层叠置顶 + Esc 关闭</button>

layui.use('layer', function(){ //独立版的layer无需执行这一句var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句//触发事件var active = {setTop: function(){var that = this; //多窗口模式,层叠置顶layer.open({type: 1 //此处以iframe举例,title: '当你选择该窗体时,即会在最顶端',area: ['390px', '260px'],shade: 0,maxmin: true,offset: [ //为了演示,随机坐标Math.random()*($(window).height()-300),Math.random()*($(window).width()-390)] ,content: '<div style="padding: 15px;">内容标记:'+ new Date().getTime() + ',按 ESC 键可关闭。<br><br>当你的页面有很多很多 layer 窗口,你需要像 Window 窗体那样,点击某个窗口,该窗体就置顶在上面,那么 layer.setTop() 可以来轻松实现。它采用巧妙的逻辑,以使这种置顶的性能达到最优。</div>',btn: ['继续弹出', '全部关闭'] //只是为了演示,yes: function(){$(that).click(); },btn2: function(){layer.closeAll();},zIndex: layer.zIndex //重点1,success: function(layero, index){layer.setTop(layero); //重点2. 保持选中窗口置顶//记录索引,以便按 esc 键关闭。事件见代码最末尾处。layer.escIndex = layer.escIndex || [];layer.escIndex.unshift(index);//选中当前层时,将当前层索引放置在首位layero.on('mousedown', function(){var _index = layer.escIndex.indexOf(index);if(_index !== -1){layer.escIndex.splice(_index, 1); //删除原有索引}layer.escIndex.unshift(index); //将索引插入到数组首位});},end: function(){//更新索引if(typeof layer.escIndex === 'object'){layer.escIndex.splice(0, 1);}}});}

2.配置一个透明的询问框

这个图呢 主要是用到透明的方法来渲染这个模态框。

代码如下: 

  <button data-method="confirmTrans" class="layui-btn">配置一个透明的询问框</button>
confirmTrans: function(){//配置一个透明的询问框layer.msg('大部分参数都是可以公用的<br>合理搭配,展示不一样的风格', {time: 20000, //20s后自动关闭btn: ['明白了', '知道了', '哦']});}

这就是简单的透明模态框了,插件是必不可少的,注意!!

3.示范一个公告层

 这个模态框主要表明的是公告式的弹出层。

代码如下:

 <button data-method="notice" class="layui-btn">示范一个公告层</button>

notice: function(){//示范一个公告层layer.open({type: 1,title: false //不显示标题栏,closeBtn: false,area: '300px;',shade: 0.8,id: 'LAY_layuipro' //设定一个id,防止重复弹出,btn: ['火速围观', '残忍拒绝'],btnAlign: 'c',moveType: 1 //拖拽模式,0或者1,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗?亲!<br>layer ≠ layui<br><br> layer 只是作为 layui 的一个弹层模块,由于其用户基数较大,所以常常会有人以为 layui 是 <del>layerui</del><br><br>layer 虽然已被 Layui 收编为内置的弹层模块,但仍然会作为一个独立组件全力维护、升级 ^_^</div>',success: function(layero){var btn = layero.find('.layui-layer-btn');btn.find('.layui-layer-btn0').attr({href: '../index.html',target: '_blank'});}});}

我所编写的就是layui弹出层的一部分了,基本的弹出层的表达方式,如需了解更多欢迎大家去lauui官网,里面的东西有很多!!


http://chatgpt.dhexx.cn/article/R4qyAqWL.shtml

相关文章

模态框动态赋值

模态框动态赋值&#xff0c;可以有多种方式&#xff1a;1、每次一个个填充&#xff1b;2、直接针对模态框中的ID赋值。。。 今天说下同事犯的错误&#xff0c;大家引以为鉴&#xff1a; 首先如图&#xff1a; 他在点击详情链接时&#xff0c;是能拿到相关参数的&#xff0c;进…

html 自定义模态框,自定义对话框、模态框

致敬iphoneX的小刘海....自定义模态框 body{ text-align: center; } #modalBg{ position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0.2); width: 100%; height: 100%; margin: auto; display: none; } #modal{ min-width: 30%; background-color: white; bor…

html怎么自动弹出模态框,纯CSS实现带点击模态框外部自动关闭的模态框

在网页中我们经常会用到模态框,一般会用于显示表单或者是提示信息。由于模态框涉及到页面上比较多的交互效果,最简单的交互就是打开以及关闭两个操作,而关闭又会涉及是否需要在打开状态下点击模态框外部能够关闭这样的功能,因为这些交互问题,所以一般都会首先考虑到使用Ja…

模态框拖拽

1、点击弹出层&#xff0c;回弹出模态框&#xff0c;并且显示半透明的遮挡层 2、点击关闭按钮&#xff0c;可以关闭模态框&#xff0c;并且同时关闭灰色半透明遮挡层 3、鼠标放到模态框最上面一行&#xff0c;可以按住鼠标拖拽模态框在页面中移动 4、鼠标松开&#xff0c;可…

模态框案例

模态框 模态框在很多网站是很常见的&#xff0c;比如网易云音乐登录&#xff0c;百度登录等网站。 网易云音乐如图&#xff1a; 让我们来看看代码吧&#xff01;&#xff01;注意&#xff1a;这里为了更好的演示效果&#xff0c;增加了遮挡层。 HTML部分&#xff1a; <!-- …

零基础Bootstrap入门教程(16)--模态框

点此查看 所有教程、项目、源码导航 本文目录 1. 概述2. 模态框样式3. 按钮直接关联模态框4. 通过JS方法打开/关闭模态框5. 调整大小6. 动画效果7. 小结 1. 概述 模态框这个名字有点高雅了&#xff0c;其实就是对话框&#xff0c;用来弹出一个新的界面。 模态框的使用非常的场…

模态框

模态对话框&#xff08;Modal Dialogue Box&#xff0c;又叫做模式对话框&#xff09;&#xff0c;是指在用户想要对对话框以外的应用程序进行操作时&#xff0c;必须首先对该对话框进行响应 摘自百度百科 先放上效果图&#xff1a; 基本功能为点击窗口中间的发光按钮&#xff…

HTML+CSS+JavaScript实现模态框(可拖拽)

前言 模态框是指覆盖在父窗口上的子窗口&#xff0c;但在HTML网页中&#xff0c;并没有父窗口和子窗口的概念。这里是通过可隐藏的遮罩层和一个可隐藏的盒子来实现模态框的效果。 效果演示&#xff1a; 下面开始详细介绍如何实现一个可拖拽的模态框。只对 JS 部分详解&#x…

Bootstrap系列之模态框(Modal)

文章の目录 1、工作原理2、示例2.1、Modal组件2.2、在线演示2.3、静态背景2.4、滚动内容2.5、垂直居中2.6、提示和弹窗2.7、使用网格2.8、不同模态框的内容2.9、改变动画2.10、移除动画2.11、动态高度2.12、Accessibility2.13、嵌入YouTube视频 3、Optional sizes4、用法4.1、通…

Oracle数据迁移

本文主要提及使用exp,imp以及Oracle数据泵等工具如何进行数据迁移&#xff1a; 一、数据迁移工具 1、数据迁移工具 &#xff08;1&#xff09;数据泵 &#xff08;2&#xff09;外部表&#xff1a;external table &#xff08;3&#xff09;数据加载工具&#xff1a;sqllo…

MySQL数据库- 几种数据迁移的方法详解都在这了!看完必懂

数据迁移的几种方式 - MySQL数据库 本文关键字&#xff1a;MySQL、数据库、数据迁移、导入、导出 文章目录 数据迁移的几种方式 - MySQL数据库 一、数据迁移 1. 数据的生命周期2. 数据迁移的发生二、数据导出 1. 命令方式2. 软件方式三、数据导入 1. 命令方式2. 软件方式四、…

数据迁移方法

在我的《高并发系统设计目标之可扩展性》博文中提到&#xff0c;随着业务的发展&#xff0c;我们会沿着AKF的Y轴进行微服务化的改造。但是沿着Y轴的重构过程中往往涉及到分库分表。那么这时就需要进行数据库的迁移了。沿着AKF的Z轴也类似&#xff0c;那么迁移有什么原则呢&…

如何高效地进行大规模数据迁移?

导读 我们在做一次系统业务模型重构的时候&#xff0c;往往会遇到把旧模型表中的数据迁移到新模型表中&#xff0c;如果这时候&#xff0c;我们旧表中的数据规模已达到千万级以上&#xff0c;那么&#xff0c;这个从旧表迁移到新表的过程会非常漫长&#xff0c;而业务仍需快速推…

电脑数据怎么迁移?

“最近我的电脑越来越卡&#xff0c;运行程序时还会出现卡死奔溃的现象&#xff0c;陪伴我多年的电脑到了退休的时候了。购买了一台新款的笔记本电脑&#xff0c;打开软件运行多么的流畅&#xff0c;别提多高兴了&#xff01;可是&#xff0c;我想把旧电脑的数据导入到新电脑怎…

数据库整体迁移

1.迁移方法概述: 使用Navicat Premium 分别与源数据库和目标数据库建立连接,然后借助Navicat Premium自带的数据传输功能,实现Oracle数据库的迁移.其实跟从MySQL数据库迁移到oracle数据库是一个套路. O(∩_∩)O~ 听起来,是不是很简单,其实就是很简单!下边我就讲一下具体实现的细…

数据库迁移的方法

数据库迁移的方法 我们今天以mysql为例&#xff0c;讲讲数据库迁移的四种方法。 1、将数据库倒出为sql文件&#xff0c;再重新导入&#xff08;推荐&#xff09;。 首先将mysql数据库锁定&#xff0c;并将内存中的数据写入磁盘。 flush tables with read lock ; 用mysqldump将t…

数据迁移——技术选型

日常我们在开发中&#xff0c;随着业务需求的变更&#xff0c;重构系统是很常见的事情。重构系统常见的一个场景是变更底层数据模型与存储结构。这种情况下就要对数据进行迁移&#xff0c;从而使业务能正常运行。 背景如下&#xff1a;老系统中使用了mongo数据库&#xff0c;由…

Oracle数据迁移MySQL

前言: 现今&#xff0c;Oracle数据迁移MySQL的需求已经越来越普遍&#xff0c;主要的迁移场景大致可以分为三类&#xff0c;第一类是涉及小表以及少量表的一次性迁移&#xff0c;无需进行增量同步&#xff0c;第二类是涉及大表以及多表的一次性迁移&#xff0c;第三类是涉及增…

电脑之间如何迁移数据?数据迁移方法描述

电脑之间如何迁移数据&#xff1f;当更换电脑时&#xff0c;很多人需要做的第一件事&#xff0c;就是将旧电脑的数据通过外置存储设备等拷贝到新电脑上&#xff0c;并且还要在新电脑上重新安装应用程序&#xff0c;步骤繁琐&#xff0c;耗费了大量的时间和精力不说&#xff0c;…

DB数据迁移方案

互联网系统&#xff0c;经常会有数据迁移的需求。系统从机房迁移到云平台&#xff0c;从一个云平台迁移到另一个云平台&#xff0c;系统重构后表结构发生了变化&#xff0c;分库分表&#xff0c;更换数据库选型等等&#xff0c;很多场景都需要迁移数据。 在互联网行业&#xf…