Simple Modal

modal.css

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  .modal-overlay {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255,255,255,0.9);
    z-index: 0;
  }
  .close {
    display: block;
    position: absolute;
    font-weight: bold;
    z-index: 2;
    @media(max-width: 830px) {
      left: 0;
      right: 0;
      top: 0;
      width: 100%;
      height: 30px;
      font-size: 30px;
      line-height: 30px;
      background-color: #000;
      padding-right: 10px;
      text-align: right;
      color: #fff;
    }
    @media(min-width: 831px) {
      right: 40px;
      top: 40px;
      width: 50px;
      height: 50px;
      line-height: 50px;
      font-size: 100px;
      color: #000;
    }
  }
  .modal-content-wrapper {
    display: block;
    width: 100%;
    max-width: 720px;
    min-height: 440px;
    overflow: scroll;
    border: 10px solid #d83089;
    z-index: 1;
    background: #fff;
    @media(max-width: 830px) {
      border: none;
      min-width: 100%;
      max-height: 100%;
      padding-top: 30px;
    }
    @media(min-width: 831px) {
      max-height: 90%;
    }
  }
}

modal.html

<div class="modal" style="display: none;">
  <div class="modal-overlay" onclick="return $modal.hide(event);"></div>
  <a href="#close" onclick="return $modal.hide(event);" class="close">&times;</a>
  <div class="modal-content-wrapper">
    <!-- content -->
  </div>
</div>

modal.js

window.$modal = new (function () {
  var $el = document.querySelector('.modal');
  this.show = function(e) {
    e.preventDefault()
    $el.style.display = 'flex';
  }
  this.hide = function(e) {
    e.preventDefault()
    $el.style.display = 'none';
  }
})();