在模型图像下面添加文本框
在模型图像下面添加文本框
提问于 2019-10-19 03:38:35
我正在为我的应用程序使用网格库。这个画廊正是我想要的。它完全符合我的需要，我不想改变它。但是，我需要对它作两项修改，如果没有这些改动，对我来说是不完整的。但我不知道该怎么做。所需的修改如下：
- 在单击图库中的图像时，整个图像以模式格式弹出(看起来类似于引导模式)。问题是，点击屏幕上的任何地方(包括图像)，图像都会关闭。但我不希望它关闭时，图像区域被点击。只有当外部区域(黑暗区域)被点击时，它才会关闭。如何修复？
- ，我想在图像下面添加一个白色文本框，根据图像大小(宽度)不同(每个图像有不同的宽度和高度)。此框将用于提供一个圆形用户DP和他的用户名，当点击它到另一个页面(比如用户的时间线)。如何创建此框？
现在，这里要注意的是，问题1与问题2有关，因为不能单击用户名，因为在整个图像打开后，图像在屏幕上的任何位置(包括图像)第一次单击都会关闭。
代码笔片段：[https://codepen.io/zoomkraft/pen/KKKNVXN](https://codepen.io/zoomkraft/pen/KKKNVXN)
[1]: https://www.codepen.io/zoomkraft/pen/KKKNVXN回答 1
Stack Overflow用户
发布于 2019-10-19 05:16:46
- 一种解决方案是在click事件处理程序上添加一个条件，该条件可以在图库-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
要让您的链接动态地从图像中获取其宽度，您可能应该在它们周围放置一个包装器。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58460315
复制相关文章
相似问题
腾讯云开发者
