gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 19:15:22 25 4
gpt4 key购买 nike

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

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

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

现在,这里要注意的是,问题 1 与问题 2 相关,因为无法点击用户名,因为在完整图像打开后,图像会在屏幕上任何地方(包括图像)的任何第一次点击关闭。

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

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

最佳答案

  1. 一种解决方案是在点击事件处理程序上添加一个条件,以切换 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. 要让您的链接从图像中动态获取其宽度,您可能应该在它们周围放置一个包装器。

关于javascript - 在模型图像下方添加文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58460315/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com