<div class="element">
  <button class="button">Кнопка 1</button>
  <div class="content hidden-element">
    <div class="content__card">
      <figure class="content-card__poster">
        <img class="content-card-poster__image" alt="image" src="http://moonpresence.site/moonpresence/media/images/PRGZ1ID/poster-8.jpg" />
      </figure>
      <h5 class="content-card__title">Bububu 1</h5>
    </div>
  </div>
</div>

<div class="element">
  <button class="button">Кнопка 2</button>
  <div class="content hidden-element">
    <div class="content__card">
      <figure class="content-card__poster">
        <img class="content-card-poster__image" alt="image" src="http://moonpresence.site/moonpresence/media/images/PRGZ1ID/poster-7.jpg" />
      </figure>
      <h5 class="content-card__title">Bububu 2</h5>
    </div>
  </div>
</div>

<div class="modal">
  <button class="modal__close-button"></button>
  <div class="modal__innerzone"></div>
</div>
body {
  padding: 40px;
  font-family: "Oswald", sans-serif;
  background: #eee;
}

.modal {
  width: 100%;
  max-width: 800px;
  height: 300px;
  background: #fff;
  opacity: 0;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.35s ease-in-out, visibility 0.35s ease-in-out;
  pointer-events: none;
  position: fixed;
  margin: 0 auto;
  visibility: hidden;
  z-index: 9999;
  border-radius: 5px;
  box-shadow: 0 9px 16px 0 rgba(224, 229, 238, 0.5);
  border: solid 1px #e5eaed;
}

.modal__close-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  right: 20px;
  top: 15px;
  background-size: 30px 30px;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #252525;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E %3Cg fill='white'%3E %3Cpath d='M11.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708 0z'/%3E %3Cpath d='M4.146 4.146a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7a.5.5 0 0 0-.708 0z'/%3E %3C/g%3E %3C/svg%3E");
  box-shadow: 0 9px 16px 0 rgba(224, 229, 238, 0.5);
  border: solid 1px #e5eaed;
  transition: transform 0.35s ease-in-out;
}

.modal__close-button:hover {
  transform: rotate(360deg);
}

.button {
  font-size: 16px;
  color: #fff;
  background: #e8049a;
  padding: 8px 40px;
  border-radius: 5px;
  margin-bottom: 30px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background 0.35s ease-in-out;
}

.button:hover {
  background: cornflowerblue;
}

.hidden-element {
  width: 0;
  height: 0;
  position: absolute;
  opacity: 0;
  visibility: hidden;
}

.content__card {
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-card__title {
  font-size: 50px;
  text-transform: uppercase;
}

.content-card__poster {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20px;
}

.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
const mainFunction = () => {
  const elements = document.querySelectorAll(".element");
  const modal = document.querySelector(".modal");

  const commonFunction = (element) => {
    const button = element.querySelector(".button");
    const content = element.querySelector(".content").innerHTML;
    const modalContent = modal.querySelector(".modal__innerzone");
    const closeBttn = modal.querySelector(".modal__close-button");

    const activateModal = () => {
      modal.classList.add("active");
      modalContent.innerHTML = `${content}`;
    };

    const deactivateModal = () => {
      modal.classList.remove("active");
    };

    button.addEventListener("click", activateModal);
    closeBttn.addEventListener("click", deactivateModal);
  };

  elements.forEach((element) => commonFunction(element));
};

document.addEventListener("DOMContentLoaded", mainFunction);
View Compiled

External CSS

  1. https://moonpresence.site/moonpresence/foundation/css/base.css

External JavaScript

This Pen doesn't use any external JavaScript resources.