在 model 圖像下方添加文本框

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 元素上切換完整的 class：

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

2. 要讓您的鏈接從圖像中動態獲取其寬度，您可能應該在它們周圍放置一個包裝器。