带有功能关闭按钮(HTML，CSS，JavaScript)的弹出窗口

Question

>我是一个彻头彻尾的菜鸟，但我正在尝试建立一个网站，不幸的是，我遇到了一个问题。

我在网格中有一组文章(卡片(。每张卡片都包含一个带有标题、图像和文本简短预览的"缩略图"。这个想法是，当您单击卡片项目时，将出现一个弹出窗口，其中包含可能包含不同 HTML 和 CSS 的完整文章。单击后，背景也会变得模糊。 弹出窗口的右上角将有一个关闭按钮。

我遇到的问题是整篇文章是卡片项目的子项。这意味着点击功能在文章内部不断发生。因此，即使我单击关闭按钮，它也会立即重新打开。我希望用户能够单击文章并与之交互，而不会意外关闭它，除非他们点击了.closediv。

请允许我分享代码(它是用哈巴狗/玉写的(：

HTML(哈巴狗(：

.card(onclick="expandFunction()")
.image
.information
h4.title Preview Title
p.description Preview Description
#blurry.hideme
article#full.hideme
h4.m-title Main Title
p.m-description Main Description 
p.m-body Main Article
.close(onclick="contractFunction()")

Javascript：

function expandFunction() {
var y = document.getElementById("full");
var x = document.getElementById("blurry");
y.classList.toggle("hideme");
x.classList.toggle("hideme");
}
function contractFunction() {
var y = document.getElementById("full");
var x = document.getElementById("blurry");
y.classList.toggle("hideme");
x.classList.toggle("hideme");
}

hideme类只是应用于div 的display: none。

此外，现在我的 javascript 被硬编码为使用 ID 打开其中一篇卡片文章。是否可以使用相对路径，这样我就不必为我拥有的每张卡创建唯一的函数？

Answer 1

据我所知，您只需要防止单击事件通过 DOM 传播，我将像这样更改您的脚本：

function expandFunction(event) {
event.stopPropagation();
var y = document.getElementById("full");
var x = document.getElementById("blurry");
element.classList.toggle("hideme");
x.classList.toggle("hideme");
}
function contractFunction(event) {
event.stopPropagation();
var y = document.getElementById("full");
var x = document.getElementById("blurry");
element.classList.toggle("hideme");
x.classList.toggle("hideme");
}

这样，您所做的任何单击都将仅影响触发它的元素，并且不会沿着DOM触发其他事件

Answer 2

您应该检查弹出窗口是否已打开，如果是，请不要再次运行展开功能。

function expandFunction() {
var x = document.getElementById("blurry");
if(x.classList.contains("hideme")) { 
var y = document.getElementById("full");
element.classList.toggle("hideme");
x.classList.toggle("hideme");
}
}

这样，关闭卡的唯一方法是从.close按钮。