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

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元素上切换完整类：