Adding box below model image for text

Question

I am using a grid gallery for my application. This gallery is exactly what I want. It perfectly suits my needs and I do not want to change it. However, I need to have TWO changes in it without which its incomplete for my purpose. But I am not getting how to do it. The required changes are:

1. On clicking an image in the gallery, the full image pops up in modal format (looks similar to bootstrap modal). The problem is that on clicking anywhere on the screen (including the image) the image closes. But I do not want it to close when the image area is clicked. It should close only when the outside area (dark area) is clicked. How to fix it?

2. I want to add a white text box just below the image that fits the image size (width) depending upon the image (each image has different width and height). This box will be used to provide a round user DP along with his username which when clicked takes it to another page (say like user's timeline). How to create this box?

Now, to note here is that problem 1 relates to problem 2 as the username can't be clicked because the image closes on any first click anywhere on the screen (including the image) after the full image opens.

Code Pen Snippet: [ https://codepen.io/zoomkraft/pen/KKKNVXN ][1]

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

Answer 1

1. One solution is to add a condition on the click event handler that toggles the full class on the gallery-item element:

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");
  });
});

Here is your codepen edited: https://codepen.io/giuseppedeponte/pen/gOOLPya?editors=0010

2. To have your link dynamically getting its width from the image you should probably put a wrapper around them.