JavaScript 在网页中央弹出一个 div 元素 |
您所在的位置:网站首页 › 网页如何退出全屏窗口 › JavaScript 在网页中央弹出一个 div 元素 |
当前位置:主页 > 学无止境 > WEB前端 >
WEB前端
编程语言
网络
算法
操作系统
数据库
JavaScript 在网页中央弹出一个 div 元素
作者:迹忆客
最近更新:2023/03/22
浏览次数:
本篇文章将解决如何在网页中央打开一个弹出窗口。首先,我们有以下查询要在本文中解决: 什么是弹出窗口 设计一个弹出窗口 在 JavaScript 中打开和关闭弹出窗口 使用 jQuery 打开和关闭弹出窗口 什么是弹出窗口弹出窗口是在底层内容之上的窗口上打开的小窗口或小框。 使用弹出窗口的主要用例是关注某些信息而不是整个内容,提示用户确认。或者,弹出窗口也称为模态框。 样式化弹出窗口弹出窗口的样式很重要,唯一的原因是你希望它显示在主要内容之上,或者至少需要给人一种它在主要内容之上的错觉。我们将通过以下示例了解如何执行此操作: html, body { height: 100%; } .overlay { position: absolute; display: none; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.8); z-index: 2; } .popup { position: absolute; width: 50%; height: 50%; top: 25%; left: 25%; text-align: center; background: white; } .popup h3 { font-size: 15px; height: 50px; line-height: 50px; color: black; } .CloseIcon{ cursor: pointer; } Document ✖ Popup Content Show PopUp在这个简单的示例中,我们创建了一个显示弹出窗口的按钮。但最重要的是,我们有一个 overlay 元素,它会在所有内容之上以浅黑色显示,从而使用户难以看到该内容。 然后我们创建了一个 popup 元素并将其设置为位于 overlay 元素和网页中央的上方。在这样做的过程中,我们设法隐藏了主要内容。 当一个弹出窗口在屏幕中间打开时,它会引起用户的注意,因为这是用户唯一能清楚看到的东西。但是 overlay 元素被设置为 none,所以它现在不显示。 问题是,我们如何切换弹出窗口?我们可以通过使用 JavaScript 或 jQuery 来做到这一点。让我们在下面详细讨论两者。 在 JavaScript 中打开和关闭弹出窗口我们可以使用 JavaScript 来切换弹出样式属性;我们可以通过访问 DOM 元素及其 style 属性并将 display 类型从 none 更改为 block 来做到这一点,这将使弹出窗口出现。 同样,一旦用户单击关闭图标,我们就可以改回 none。让我们用一个例子来说明这一点。 function OpenModal() { let element = document.getElementById('overlay') element.style.display = 'block' } function CloseModal() { let element = document.getElementById('overlay') element.style.display = 'none' } 使用 jQuery 打开和关闭弹出窗口或者,我们可以用 jQuery 重复同样的事情。让我们看一下源代码和所需的更改。 function OpenModal() { $('#overlay').show(); } function CloseModal() { $('#overlay').hide(); }在这个例子中,我们使用了 show 和 hide jQuery 方法。不是将 display 的属性从 none 更改为 block,show 删除 element 上的 display 属性,类似地,hide 将 display 属性设置为 none . 注意 show 仅适用于 display:none 或 jQuery 隐藏的项目;它不适用于 CSS 的 visibility 属性。 此外,使用 jQuery 时,请务必在标头中添加 jQuery CDN(或安装 jQuery 包)。 上一篇:在 HTML 中创建垂直线 下一篇:没有了 相关文章 在 HTML 中创建垂直线发布时间:2023/03/23 浏览次数:152 分类:WEB前端 本教程介绍如何在 HTML 中创建垂直线。 在 HTML 中跳过一行发布时间:2023/03/23 浏览次数:177 分类:WEB前端 本教程介绍如何在 HTML 中跳过一行。 在 HTML 中添加悬停文本发布时间:2023/03/23 浏览次数:84 分类:WEB前端 本教程介绍如何在 HTML 中添加悬停文本。 在 HTML 中添加多个单选按钮组发布时间:2023/03/23 浏览次数:126 分类:WEB前端 本教程介绍如何在 HTML 中添加多个单选按钮组。 在 HTML 中编写摄氏度符号发布时间:2023/03/23 浏览次数:198 分类:WEB前端 本教程介绍如何在 HTML 中编写摄氏度符号。 用 HTML 编写代码块发布时间:2023/03/23 浏览次数:108 分类:WEB前端 本教程介绍如何在 HTML 中编写代码块。 从 HTML 表格中删除边框发布时间:2023/03/23 浏览次数:146 分类:WEB前端 本文介绍如何去除 HTML 表格中的边框 在 HTML 中将表格顶部对齐发布时间:2023/03/23 浏览次数:114 分类:WEB前端 本教程介绍如何在 HTML 中将表格数据与顶部对齐。 在 HTML 中的表格单元格内添加图片发布时间:2023/03/23 浏览次数:82 分类:WEB前端 本教程介绍如何在 HTML 表格单元格中添加图片。 转载请发邮件至 [email protected] 进行申请,经作者同意之后,转载请以链接形式注明出处 本文地址: |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |