带有功能关闭按钮的弹出窗口（HTML、CSS、JavaScript）答案

【问题标题】：Popup with functional close button (HTML, CSS, JavaScript)带有功能关闭按钮的弹出窗口（HTML、CSS、JavaScript）
【发布时间】：2019-12-13 09:02:20
【问题描述】：

我是一个菜鸟，但我正在尝试制作一个网站，但不幸的是我遇到了一个问题。

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

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

请允许我分享代码（它是用 pug/jade 编写的）：

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 打开其中一篇卡片文章。是否可以使用相对路径，这样我就不必为我拥有的每张卡创建一个唯一的函数？

【问题讨论】：

这与您的问题无关，但您应该考虑使用button 而不是div 作为关闭按钮。这对可访问性更好。

标签： javascript html css popup pug

【解决方案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 移动

【讨论】：

【解决方案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按钮。

【讨论】：