在模型图像下方添加框以显示文本

Question

我正在为我的应用程序使用网格库。这个画廊正是我想要的。它完全适合我的需要，我不想改变它。但是，我需要对其进行两次更改，否则我的目的是不完整的。但我不知道该怎么做。所需的更改是：

1. 单击图库中的图像时，会以模态格式弹出完整图像（看起来类似于引导模式）。问题是在单击屏幕上的任何位置（包括图像）时，图像会关闭。但是我不希望它在单击图像区域时关闭。只有在单击外部区域（暗区）时，它才会关闭。如何解决？

2. 我想在图像下方添加一个白色文本框，该文本框适合图像大小（宽度），具体取决于图像（每个图像具有不同的宽度和高度）。此框将用于提供圆形用户 DP 及其用户名，单击该用户名将其带到另一个页面（例如用户的时间线）。如何创建这个盒子？

现在，需要注意的是，问题 1 与问题 2 相关，因为无法单击用户名，因为在完整图像打开后第一次单击屏幕上任何位置（包括图像）时，图像会关闭。

代码笔片段：[https://codepen.io/zoomkraft/pen/KKKNVXN][1]

[1]: https://www.codepen.io/zoomkraft/pen/KKKNVXN

Answer 1

1. 一种解决方案是在 click 事件处理程序上添加一个条件，以切换 gallery-item 元素上的完整类：

gallery.querySelectorAll(".gallery-item").forEach(function(item) {
  item.addEventListener("click", function(event) {
    // If image is in full mode and the click event was fired by an img or a element, do not toggle the full class
    if (item.classList.contains("full") && ['IMG', 'A'].includes(event.target.tagName)) {
      return;
    }
    item.classList.toggle("full");
  });
});

这是您编辑的代码笔：https://codepen.io/giuseppedeponte/pen/gOOLPya?editors=0010

1. 要让您的链接从图像中动态获取其宽度，您可能应该在它们周围放置一个包装器。