# open modal in image list

"**Open modal**" means displaying a pop-up window (modal) that appears on top of the page content and its often used to focus the user’s attention on something important, like a larger version of an image.

## how to open modal

### 1) add `imgModal` that will be toggled visible and invincible

```xml
<div id="imgModal" class="modal-image-container">
  <span id="closeModal" class="close-modal">&times;</span>
  <img id="modalImg" src="" alt="" class="modal-image">
</div>
```

### 2) for every image, if it was clicked it will show the modal

```javascript
document.querySelectorAll('.image-grid img').forEach(img => {
  img.addEventListener('click', function () {
    document.getElementById('modalImg').src = this.src;
    document.getElementById('modalImg').alt = this.alt;
    document.getElementById('imgModal').style.display = 'flex';
  });
});
```

### 3) if `closeModal` button are clicked the modal will disappear

```javascript
document.getElementById('closeModal').onclick = function () {
  document.getElementById('imgModal').style.display = 'none';
};
```

### 4) if `this` (background) of the image are clicked the modal will disappear

```javascript
document.getElementById('imgModal').onclick = function (e) {
  if (e.target === this) this.style.display = 'none';
};
```

### You're all set!

now you can make the user focus on one image by clicking on it

### Codepen

%[https://codepen.io/bayuaji/pen/WbbqRMN] 

a