Modal

modal.html

<div class="mw1500 ">
    <img src="/assets/img/inner-circle/innerCircle.jpg" class="modal-img" alt="">
    <div class="is-visible-modal text-center">
        <img src="/assets/img/inner-circle/innerCircle.jpg" alt="">
    </div>
</div>

modal.js

$(".modal-close").click(function () {
  $(".modal").removeClass("open");
  $(".modal-content").html('');
});

$(".modal-background").click(function () {
  $(".modal").removeClass("open");
  $(".modal-content").html('');
});

$(".modal-img").click(function() {
  var htmlcontent = $(this).next("div").clone();
  $(".modal-content").html(htmlcontent);
  $(".modal").addClass("open");
 });

$(document).on('keyup', function (e) {
  if (e.key === "Escape") {
    $(".modal").removeClass("open");
    $(".modal-content").html('');
  }
});

modal.scss

.modal {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.001;
  pointer-events: none;
  background: rgba(0,0,0,.9);
  z-index: 100;
  transition: opacity .4s ease;
  .modal-content {
    display: block;
    min-width: 80%;
    max-width: 1200px;
  }
  .modal-background {
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .modal-content {
    position: relative;
    z-index: 1;
  }
  &.open {
    opacity: 1;
    pointer-events: all;
    .modal-content {
      .is-visible-modal {
        display: block;
      }
      @include bp(tablet) {
        max-width: 90%;
        padding: 25px!important;
      }
    }
    button.modal-close {
      position: absolute;
      top: 25px;
      right: 25px;
      background: white;
      border: 2px solid black;
      border-radius: 50%;
      font-size: 1rem;
      z-index: 1;
      &::after {
        content: "x";
        font-weight: bold;
      }
    }
  }
}


.modal-close {
  position: absolute;
  top: 100px;
  right: 100px;
  width: 40px;
  height: 40px;
  background: none;
}

.modal-img {
  cursor: pointer;
}

.is-visible-modal {
  display: none;
  img {
    max-width: 75vw;
    max-height: 75vh;
  }
}