i created a dom event that when i click a specific button it will show me the specific image related to that button but when i close the modal the image gets taken in the modal section and dissapears from the page. how to prevent this from happening?

jsfiddle

CodePudding user response：

To keep at maximum code you have done, but with "mandatory" changes only...

First don't use id several times, very bad idea.

Second the src is the next sibling src not the next sibling.

Second when you create your modalIMG, you append it, and you still have the element modalIMG to add style, class... whatever, no need to search first element child...

const galleryModal = document.querySelector('#modalGallery');
const modalContent = document.querySelector('.modal-content');
const buttonsGallery = document.querySelectorAll('button.modalGalleryBtn');
const mainGallery = document.querySelectorAll('.containerGallery');



buttonsGallery.forEach(btn => {
  btn.addEventListener('click', () => {
    galleryModal.style.display = 'flex';
    const modalIMG = document.createElement('img');
    modalContent.innerHTML = '';
    modalContent.appendChild(modalIMG);
    modalIMG.src = btn.nextElementSibling.src;
    modalIMG.classList.add('modalImgTaken');
    modalIMG.style.width = '100%';
    modalIMG.style.height = '100%';
    modalIMG.style.objectFit = 'contain';
  })
})


const modalGalleryClose = document.querySelector('#closeGalleryModal');
modalGalleryClose.addEventListener('click', () => {
  galleryModal.style.display = 'none';
})

@import url('https://fonts.googleapis.com/css2?family=Junge&family=Montserrat:wght@300&family=Quicksand&family=Rubik Mono One&display=swap');
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: auto;
  background: #360882;
}

.gallery {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10vh;
  margin-top: 8vh;
}

.gallery-container {
  position: relative;
  width: 400px;
  height: 350px;
  background: none;
}

.gallery-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(20px 10px 10px rgba(0, 0, 0, 0.507));
  cursor: pointer;
}

.gallery-container button {
  position: absolute;
  left: 19.5vh;
  bottom: -2vh;
  z-index: 1;
  padding: 10px 30px;
  border: none;
  border-radius: 10px;
  background: #ac3925;
  color: #fff;
  cursor: pointer;
  font-size: 17px;
  font-family: 'Quicksand', 'sans-serif';
  font-weight: 300;
  letter-spacing: 1px;
  box-shadow: 20px 15px 10px #00000086;
  transition: background .3s ease-in-out;
}

.gallery-container button:hover {
  background: #DC2B0B;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.712);
  backdrop-filter: blur(8px);
  z-index: 2;
  display: none;
  justify-content: center;
  align-items: center;
}

.modal-content {
  position: relative;
  transform: translateY(6vh);
  width: 85%;
  height: 85%;
  display: flex;
  justify-content: center;
  align-items: center;
  object-fit: contain;
}

.modalCloseBtn {
  transform: translate(132vh, -32vh);
  cursor: pointer;
  z-index: 1;
}

.modalCloseBtn img {
  width: 70px;
  height: 70px;
}

<section >
  <div >
    <button >See Image</button>
    <img src=https://images.unsplash.com/photo-1674821503660-9445aab3d662?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80 alt="01">
  </div>
  <div >
    <button >See Image</button>
    <img src=https://images.unsplash.com/photo-1674718061623-2d1902f6889d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80 alt="02">
  </div>
  <div >
    <button >See Image</button>
    <img src=https://images.unsplash.com/photo-1674763973434-75e1930d4959?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80 alt="03">
  </div>
</section>
<div  id="modalGallery">
  <div  id="closeGalleryModal">
    <img src=https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-512.png>
  </div>
  <div  id="modal-contentGallery"></div>
</div>

CodePudding user response：

I changed a little bit of your buttonsGallery.forEach code add this in your example and see

       buttonsGallery.forEach(btn => {
            btn.addEventListener('click', () => {
                galleryModal.style.display = 'flex';
                // creating element img
                let modalIMG = document.createElement('img')
                // adding src to it's
                modalIMG.src = btn.nextElementSibling.src;
                //   remove first child if there is any inside modalContent
                modalContent.innerHTML = ""
                // adding current child
                modalContent.appendChild(modalIMG);
                modalContent.firstElementChild.className = 'modalImgTaken';
                modalContent.firstElementChild.style.width = '100%';
                modalContent.firstElementChild.style.height = '100%';
                modalContent.firstElementChild.style.objectFit = 'contain';
            })
        })