开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js 模态框的原理及使用

模态框（Modal）是一种常见的用户界面元素，它会在当前页面上显示一个覆盖层，通常用于显示重要信息、警告、确认对话框或表单。模态框会阻止用户与页面的其他部分进行交互，直到它被关闭。

原理

模态框的实现原理主要包括以下几个方面：

HTML结构：创建一个包含模态框内容的容器，并使用CSS样式将其隐藏。
CSS样式：使用CSS来控制模态框的显示和隐藏，以及覆盖层的样式。
JavaScript逻辑：编写JavaScript代码来处理模态框的打开和关闭事件。

使用

以下是一个简单的模态框实现示例：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 按钮触发模态框 -->
    <button id="openModalBtn">Open Modal</button>

    <!-- 模态框结构 -->
    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close-btn">&times;</span>
            <p>This is a modal!</p>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

/* 模态框样式 */
.modal {
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定位置 */
    z-index: 1; /* 确保在最上层 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4); /* 背景半透明 */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-btn:hover,
.close-btn:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

JavaScript (script.js)

// 获取模态框元素
var modal = document.getElementById("myModal");

// 获取打开模态框的按钮
var btn = document.getElementById("openModalBtn");

// 获取关闭模态框的按钮
var span = document.getElementsByClassName("close-btn")[0];

// 点击按钮打开模态框
btn.onclick = function() {
    modal.style.display = "block";
}

// 点击关闭按钮隐藏模态框
span.onclick = function() {
    modal.style.display = "none";
}

// 点击模态框外部区域隐藏模态框
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

优势

用户体验：模态框可以有效地吸引用户的注意力，并提供必要的信息或操作选项。
交互控制：通过阻止用户与页面其他部分的交互，模态框可以确保用户完成特定的任务或确认重要的操作。
灵活性：模态框可以根据需要自定义样式和内容，以适应不同的应用场景。

类型

警告模态框：用于显示警告或错误信息。
确认模态框：用于获取用户的确认操作，如删除文件或提交表单。
表单模态框：用于在模态框中嵌入表单，方便用户填写和提交数据。

应用场景

登录/注册：在用户访问受保护的内容时，弹出登录或注册窗口。
通知和提醒：显示重要通知或系统提醒。
数据编辑：允许用户在模态框中编辑特定数据，而不离开当前页面。

常见问题及解决方法

模态框无法关闭：
- 检查JavaScript代码中是否有正确的关闭逻辑。
- 确保关闭按钮的事件绑定正确。

模态框显示异常：
- 检查CSS样式是否正确应用，特别是display属性。
- 确保HTML结构完整，没有拼写错误。
模态框背景无法点击关闭：
- 确保window.onclick事件处理程序正确设置，并且能够识别模态框的外部区域。

通过以上步骤和示例代码，你可以轻松实现一个基本的模态框，并根据需要进行扩展和定制。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

js原生模态登录框

我们的优势丰富的线上课程优秀的师资团队课后辅导及问答...--模态框--> <button class...modal.classList.remove("show-modal"):false; /*点击的是不是modaldiv,如果是就模态框消失,否则上面都不做。...nav否则切换不见nav }); open.addEventListener("click",()=> { modal.classList.add("show-modal"); //如果点击的是登录按钮就显示模态框...}); close.addEventListener("click",()=> { modal.classList.remove("show-modal"); //如果点击的是模态框上面的

8.6K3 0

【如果你要学JS XII】——使用js实现模态框拖动

这篇文章来实现一下js中的放大镜效果，以及如何实现模态框拖动效果先来了解一下offset，client和scroll系列属性1.offset系列属性使用offset系列相关属性可以动态的得到该元素的位置...2.如何实现js模态框思维整理：1.点击弹出层，模态框和遮挡层就会显示出来display:block;2.点击关闭按钮，模态框和遮挡层就会隐藏起来display:none;3.在页面中拖拽的原理:鼠标按下并且移动...，之后松开鼠标4.触发事件是鼠标按下mousedown, 鼠标移动mousemove鼠标松开mouseup5.拖拽过程:鼠标移动过程中,获得最新的值赋值给模态框的left和top值，这样模态框可以跟着鼠标走了...6.鼠标按下触发的事件源是最上面一行，就是id为title .7.鼠标的坐标减去鼠标在盒子内的坐标，才是模态框真正的位置。...8.鼠标按下，我们要得到鼠标在盒子的坐标,鼠标移动，就让模态框的坐标设置为:鼠标坐标减去盒子坐标即可，注意移动事件写到按下事件里面。<!

1491 0

bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）…

POST", data : { "type" : "query", "id" : id }, // 成功后开启模态框...: function() { alert("请求失败"); }, dataType : "json" }); } // 查询成功后向模态框插入数据并开启模态框...data是返回的JSON对象 function showQuery(data) { $("#name1").val(data.name); $("#xinghao1").val(data.xinghao...data.useperson); $("#handleperson1").val(data.handleperson); $("#admini1").val(data.admini); // 显示模态框

7.4K2 0

bootstrap的模态框

DOCTYPE html> Bootstrap 实例 - 模态框（Modal）插件js"> //bootstrap库创建模态框（Modal）模态框 --> 自己手动调用莫态 //自己手动调用 //属性data-toggle和data-target就是触发模态框的属性开始演示模态框 //自己手动调用注意两个事件模态框显示之前，隐藏时发生这两个事件 //主要逻辑：模态框在显示之前把需要操作的类容加载到模态框中

1.6K1 0

弹出模态框modal的实现方法及实例

弹出模态框modal的实现方法及实例一个简单的点击列表修改按钮，弹出bootstrap模态框，修改状态传到后台php <a href="" data-toggle=" rel="external nofollow...data.code == 200) { window.location.href="{{ url('subscribe/list') }}" rel="external nofollow" ; } /【尽量使用一键安装脚本...，要么自己做，要么网上下载或使用我博客的，把时间用在更多的地方，少做重复劳动的事情】/ } }); }); 如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

1.4K3 0

如何在Vue.js中创建模态框(弹出框)

开篇模态框（弹出层对话框，Modal Popup）在大多数现代应用程序中非常常见。它们主要用于呈现简洁的信息，非常适合显示广告和促销内容。...模态框提供了一种快速传达信息的方式，并提供了用户友好的关闭选项。在本文中，我们将使用Vuejs构建一个弹出模态框。该模态框将包括一个取消或关闭按钮，以方便用户在完成任务后关闭它。...ref 用于创建一个包含在模态框中显示的响应式变量消息。 emit用于定义一个名为“close”的事件，该事件可被触发以关闭模态框。...具有“popup”类的最外层div用作模态框的背景。 @click.self="closeModal"事件监听器附加到背景上，允许在其内容之外点击时关闭模态框。...在标题下方，有一个文章部分，其中包含了模态框的主要内容。

8242 0

bootstrap bootstrap-modal.js 模态对话框

="css/bootstrap.css" rel="stylesheet" type="text/css"> js..."> js/bootstrap.min.js"> 大模态框小模态框

3.2K2 0

模态框的最佳实践

模态框的目的在于吸引注意，但一定需要提供额外的信息，或是一个重要的用户操作，或是一份重要的协议确认。在本页面即可完成流程或信息告知。合理的使用模态框我们也总结了一些经验，更好地使用模态框。...模态框是作为当前页面的一种衍生或补充，如果其内容与当前内容毫不相干，那么可以使用其他操作（如新页面跳转）来替代模态框；模态框内部应该避免有过多的操作。...对于模态框的大小应该要有相对严格的限制，如果内容过多导致模态框或页面出现滚动条，一般来说这种体验很糟糕，但如果用于展示一些明细内容，我们可能还是会考虑使用滚动条来做；开启或关闭动画。...可访问性的反思 Accessibility 翻译过来是『无障碍访问』，是对不同终端用户的体验完善。每一个模态框，都要有通过键盘关闭的功能，通常使用ESC键。...模态框代码实现层面前端开发还是少不了代码层面的实现，业务代码对于有状态或无状态模态框的使用方式存在普遍问题。

1.4K4 0

解决在bootstrap模态框modal里使用clipboard.js时复制失效

前言最近在写网站项目时，遇到一个问题当我在bootstrap模态框modal中使用clipboard.js时，复制功能不起作用，但是在模态对话框之外的使用却没有任何问题而从其他元素复制文本时复制功能依旧有效...，但如果我从属性复制文本，却不起作用，data-clipboard-text属性失效正文后来发现是由于Bootstrap的模态强制执行焦点，导致第三方库（包括Clipboard.js）出现问题通过执行以下操作来关闭此功能...Xcnte' s Blog（除特别注明外）本文链接：https://www.xcnte.com/archives/640/ 本站文章采用知识共享署名4.0 国际许可协议进行许可，请在转载时注明出处及本声明

2.2K2 0

原生JS实现Tab切换效果和模态框效果

原生JS实现Tab切换效果效果展示 <!...'active'); var index = [].indexOf.call(tabLis,clickNode); //tabLis返回的是类数组对象...tabPanels[index].classList.add('active'); } }) 原生JS...实现模态框效果效果展示 <!

9.8K5 0

时间控件在bootstrap模态框中的使用原

时间控件在bootstrap模态框中的使用，经常时间控件会出现在模态框的下面，解决此问题，只要设置时间控件的z-index,设成比较高的数值即可解决此问题 (adsbygoogle = window.adsbygoogle

1.5K1 0

共用模态框的新增、修改

共用模态框的新增、修改开发工具与关键技术：MVC 作者：盘洪源撰写时间：2019年5月1日星期天在之前我们一般的新增修改都是通过弹出模态框来进行一个新增修改功能的，但大多数都是新增通过新增模态框，...修改通过修改模态框，还有一种就是公用一个模态框，这个就是因为新增和修改的模态框因为是一样的，所以这个可以和起来用一个，和起来用一个这个新增修改的保存方法就和以前的有所不同。...然后就是模态框的一个弹出了，通过点击新增或者修改分别弹出各自的按钮，不同的就修改的弹出模态框需要一个数据回填。 ?...这个就需要用到在一开始在写模态框的HTML中的隐藏域了，首先在弹出修改模态框的时候是通过什么来回填数据的，就是通过隐藏域中的ID来回填数据，而弹出新增模态框就是直接弹出的，通过这个我们就可以判断模态框中的隐藏域中的...一开始我就是没有注意过这个隐藏域的问题，然后去判断当弹出模态框的时候里面如果有内容的就是修改模态框，没有的就是新增模态框，但那样根本不行，这个地方需要注意一下。

1.3K2 0

Python测试开发-创建模态框及保存数据

什么是模态框？模态框是指的在覆盖在父窗体上的子窗体。可用来做交互，我们经常会看到模态框用来登录、确定等等，到底是怎么实现这种弹出效果，bootstrap已经为我们提供了相应的组件。...1、界面原型点击添加，弹出模态框，然后输入用户：tester，消息：你好。如下图1所示： ?...,app_uitest_views.test), path('savedata/', app_uitest_views.savedata), 四前端模板页面 test.html，用于前端展示用户列表及js...触发模态框然后数据保存模态框id，函数之间的关联） 1 创建模态框: <button type="button"class="list-group-item" data-toggle="modal"data-target

1.3K2 0

bootstrap 中使用modal模态框遮罩颜色加深

使用 bootstrap + jQuery 做一个后台管理系统，采用load 方法去加载页面。...01 问题部分页面中的模态框，多次点击显示后，模态框颜色加深，具体说明：学生管理中的添加模态框，直接点击没有问题，但是去班级管理中点击添加模态框后，在点添加学生模态框，就会出现这个问题。...代码实现，直接复制的bootstrap中的模态框的示例，取消时，直接使用 hide 方法进行隐藏代码： <!...具体产生原因没有找 03 解决方案方法一：不产生重复的遮罩层没有使用data-target="#myModal"去显示模态框，隐藏也不用hide()方法，改成了js的方式，显示与取消模态框，问题解决...代码如下： $("#myModal").modal(); //显示模态框 $("#myModal").modal(‘hide’); //隐藏模态框方法二：删除重复的遮罩层参考： https:

1.3K2 0

Bootstrap框架实现简易的模态框

一、模态框的简单介绍点击按钮以查看实现效果：模态框（Modal）是覆盖在父窗体上的子窗体。...通常，目的是显示来自一个单独来源的内容，使用户可以在不离开父窗体的情况下有一些互动，比如提供信息、交互等。.../bootstrap.min.js"> 1.HTML代码 Bootstrap框架实现简易的模态框模态框的按钮 data-target的值是要加载的模态框 --> 模态框窗口，fade是可以设置模态框淡入淡出 aria-labelledby的值是模态框的标题 aria-hidden="true"用于保持模态窗口不可见

3042 0

JS：“分享到”之类的悬浮框的运动原理（代码）

start(-100); }; }; var timer = null; //功能一抹一样的函数... 分享到学习路径与来源：智能社的开发教程

2.5K7 0

bootstrap bootstrap-modal.js 模态对话框并获得传值

="css/bootstrap.css" rel="stylesheet" type="text/css"> js..."> js/bootstrap.min.js"> <div class="modal fade" id

6.5K3 0

精读《模态框的最佳实践》

模态框的目的在于吸引注意，但一定需要提供额外的信息，或是一个重要的用户操作，或是一份重要的协议确认。在本页面即可完成流程或信息告知。合理的使用模态框我们也总结了一些经验，更好地使用模态框。...模态框是作为当前页面的一种衍生或补充，如果其内容与当前内容毫不相干，那么可以使用其他操作（如新页面跳转）来替代模态框；模态框内部应该避免有过多的操作。...对于模态框的大小应该要有相对严格的限制，如果内容过多导致模态框或页面出现滚动条，一般来说这种体验很糟糕，但如果用于展示一些明细内容，我们可能还是会考虑使用滚动条来做；开启或关闭动画。...可访问性的反思 Accessibility 翻译过来是『无障碍访问』，是对不同终端用户的体验完善。每一个模态框，都要有通过键盘关闭的功能，通常使用ESC键。...模态框代码实现层面前端开发还是少不了代码层面的实现，业务代码对于有状态或无状态模态框的使用方式存在普遍问题。

5701 0

多模态大模型技术原理及实战(5)

国内外多模态大模型对比国内 LLaMA-Adapter V2 香港中文大学双语输出输入 •图像 •语音 •文本 •视频 • 3D 点云起源：LLaMA-Adapter •在线性层上进行偏差调整...，可以有效地防止数字错误 •2、仅使用单一的线性层来输出令牌预测。...多模态大模型评测数据集国内评测数据集 OwlEval •基于mPLUG-Owl模型发布 • 包含 •50 张图片 •82 个回题 •功能 •故事生成 •广告生成 •代码生成 MME •开发...•结构 •265 016张图片 •每张图片至少有 3 个问题(平均 5.4个每个问题） •每个问题 •有 10 个基本事实答案 •有 3 个合理(但可能不正确)的答案多模态大模型的评测标准国内评测标准...KROCC( Kendall Rank Order Correlation Coefficient，肯德尔秩相关系数) •RMSE( Root Mean Square Error,均方根误差 ) 多模态大模型对比

1181 0

多模态大模型技术原理及实战(6)

2022年 Edward J.Hu PLM(Pre-trained Language Model 预训练语言模型) AdaLoRA Qingru Zhang 等人 AdaLoRA技术采用了一种有效的策略来调整增量阵的分配...在增量更新中使用奇异值分解进行参数化，并基于重要性指标去除不重要的奇异值，同时保留奇异向量。...删除多余的节点来减小网络规模，从而降低计算成本，同时保持良好的推理效果和速度。步骤 •1、训练一个原始模型，该模型具有较高的性能但运行速度较慢。...•4、评估模型的大小、速度和效果等指标，如果不符合要求，那么继续进行剪枝操作直至满意为止。...分类 •非结构化剪枝 •使用技术A或B的一个或多个通道 •A 滤波 •B 权重矩阵 •分类 •权值剪枝 •神经元剪枝 •结构化剪枝 •又名：滤波器剪枝 •分类 •Filter-wise •Channel-wise

1081 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭