JavaScript 在网页中央弹出一个 div 元素
本教程将解决如何在网页中央打开一个弹出窗口。首先，我们有以下查询要在本文中解决：
- 什么是弹出窗口
- 设计一个弹出窗口
- 在 JavaScript 中打开和关闭弹出窗口
- 使用 jQuery 打开和关闭弹出窗口
什么是弹出窗口
弹出窗口是在底层内容之上的窗口上打开的小窗口或小框。
使用弹出窗口的主要用例是关注某些信息而不是整个内容，提示用户确认。或者，弹出窗口也称为模态框。
样式化弹出窗口
弹出窗口的样式很重要，唯一的原因是你希望它显示在主要内容之上，或者至少需要给人一种它在主要内容之上的错觉。我们将通过以下示例了解如何执行此操作：
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
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;
}
</style>
<title>Document</title>
</head>
<body>
<div class="overlay" id="overlay">
<div class="popup">
<div onclick="CloseModal()" class="CloseIcon">✖</div>
<h3>Popup Content</h3>
</div>
</div>
<button onclick="OpenModal()">Show PopUp</button>
</body>
</html>
在这个简单的示例中，我们创建了一个显示弹出窗口的按钮。但最重要的是，我们有一个 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 包）。