<button data-destination="#modal1" class="open-modal">Modal 1</button>
<button data-destination="#modal2" class="open-modal">Modal 2</button>
<button data-destination="#modal3" class="open-modal">Modal 3</button>

<div id="modal1" class="modal-overlay">
  <div class="modal-inner">
    <div class="modal-container modal1">
      <h2>Testing Modal Number 1</h2>
      <button class="close">Close Modal</button>
    </div>
  </div>
</div>

<div id="modal2" class="modal-overlay">
  <div class="modal-inner">
    <div class="modal-container modal2">
      <h2>Testing Modal Number 2</h2>
      <button class="close">Close Modal</button>
    </div>
  </div>
</div>

<div id="modal3" class="modal-overlay">
  <div class="modal-inner">
    <div class="modal-container modal3">
      <h2>Testing Modal Number 3</h2>
      <button class="close">Close Modal</button>
    </div>
  </div>
</div>
html,
body {
  margin: 0;
  padding: 0;
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
.modal-overlay {
  position: fixed;
  display: table;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: -1;
}
.modal-overlay.active {
  opacity: 1;
  pointer-events: initial;
  z-index: 999;
}
.modal-inner {
  display: table-cell;
  vertical-align: middle;
}
.modal-container {
  margin: 0 auto;
  width: 95%;
  min-width: 300px;
  max-width: 950px;
  max-height: 90vh;
  overflow: auto;
  border: 1px solid;
  background: #fff;
  border-radius: 5px;
  padding: 1rem;
}
.close {
  margin: 1rem;
}
/* additional code for different sized modals*/
.modal2 {
  max-width: 600px;
  background: blue;
}
.modal3 {
  max-width: 1480px;
  background: red;
}
(function (d) {
  "use strict";

  const modalButtons = d.querySelectorAll(".open-modal");
  const modals = d.querySelectorAll(".modal-overlay");
  const closeModals = d.querySelectorAll(".close");

  modalButtons.forEach(function (button) {
    button.addEventListener("click", function () {
      var target = this.dataset.destination;
      openModal(target);
    });
  });

  function openModal(target) {
    d.querySelector(target).classList.add("active");
  }

  closeModals.forEach(function (modal) {
    modal.addEventListener("click", function () {
      this.closest(".modal-overlay").classList.remove("active");
    });
  });
})(document);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.