使用 CSS 和 JavaScript 创建响应式弹出模态框
弹出式模态框是一种出现在网站前端的UI元素。它们通常由用户触发，允许用户查看更多信息或完成操作，而无需跳转到其他URL。在本教程中，我们将创建一个响应式弹出式模态框，并使用CSS和JavaScript进行样式设置。
让我们首先创建所需的 HTML 标记：
<div id="demo-modal" class="modal" role="dialog" tabindex="-1">
<div class="model-inner">
<div class="modal-header">
<h3>Hello World</h3>
<button class="modal-close" data-id="demo-modal" aria-label="Close">
×
</button>
</div>
<p>
Natus earum velit ab nobis eos. Sed et exercitationem voluptatum omnis
dolor voluptates. Velit ut ipsam sunt ipsam nostrum. Maiores officia
accusamus qui sapiente. Dolor qui vel placeat dolor nesciunt quo dolor
dolores. Quo accusamus hic atque nisi minima.
</p>
</div>
</div>
<button class="modal-open" data-id="demo-modal">Display Modal</button>
本教程中的所有内容demo-modal均为可选，仅供参考。在实际网站上使用时，您可以根据需要替换为任何内容。此外，还有一个按钮可以触发弹出窗口并显示模型。
注意：我们采用这种方式构建系统，以便在单个页面中包含多个模态框。我们通过在每个模态框及其对应的打开和关闭按钮上使用匹配的属性id来实现这一点。data-id
接下来我们将着手处理 JavaScript 功能，首先是用户点击打开和关闭按钮时的事件监听器。
let modal;
document.addEventListener("click", (e) => {
if (e.target.className === "modal-open") {
modal = document.getElementById(e.target.dataset.id);
openModal(modal);
} else if (e.target.className === "modal-close") {
closeModal(modal);
} else {
return;
}
});
这段代码会检测用户点击的是打开按钮还是关闭按钮（根据按钮的类名），然后触发相应的函数。我们先来看这个openModal函数：
const openModal = (modal) => {
document.body.style.overflow = "hidden";
modal.setAttribute("open", "true");
document.addEventListener("keydown", escClose);
let overlay = document.createElement("div");
overlay.id = "modal-overlay";
document.body.appendChild(overlay);
};
对于该closeModal函数：
const closeModal = (modal) => {
document.body.style.overflow = "auto";
modal.removeAttribute("open");
document.removeEventListener("keydown", escClose);
document.body.removeChild(document.getElementById("modal-overlay"));
};
您可能已经注意到escClose前两个函数中都使用了事件监听器。这是为了实现按下 Esc 键即可关闭模态框的功能，以下是相关代码：
const escClose = (e) => {
if (e.keyCode == 27) {
closeModal();
}
};
键盘上的每个键都有其独特的keyCode“退出”键27。
JavaScript 部分就到此结束了，现在我们可以开始学习 CSS 了：
.modal {
display: none;
align-items: center;
justify-content: center;
position: fixed;
z-index: 1;
width: 100%;
height: 100%;
}
.modal[open] {
display: flex;
}
.model-inner {
background-color: white;
border-radius: 0.5em;
max-width: 600px;
padding: 2em;
margin: auto;
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid black;
}
#modal-overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 0;
background-color: black;
opacity: 0.5;
}
这就是完成后的弹出式模态框的样子：
本教程到此结束。通过学习本教程，您将掌握如何在不依赖任何外部 JavaScript 插件或库的情况下构建模态弹出窗口。您可以在CodePen上找到此模态窗口的完整工作版本，源代码也可在GitHub上找到。
文章来源：https://dev.to/michaelburrows/create-a-responsive-popup-modal-with-css-javascript-2l88