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

Question

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

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

我遇到的问题是整篇文章是卡片项目的 child。这意味着点击功能在文章内部不断发生。所以即使我点击关闭按钮，它也会立即重新打开。我希望用户能够单击文章并与之交互而不会意外关闭它，除非他们单击 .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 class 只是一个应用于 div 的 display: none。

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

Answer 1

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

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 按钮。

Answer 2

据我所知，您只需阻止点击事件通过 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 触发其他事件

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

Popup with functional close button (HTML, CSS, JavaScript)

html

javascript

css

popup

pug