JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<a class="button pricing-sheet-link" href="#pricing-sheet">aasdfasdf</a>

<div id="pricing-sheet" class="popup-overlay">
  <div class="popup">
    <a class="popup-close" href="#/"><img src="https://cdn.safetyskills.com/wp-content/themes/safetyskills/images/icon-close.svg" alt="Close" /></a>
    <h2>asdfasdf</h2>
    <div class="popup-content">
      asdfasdf
    </div>
  </div>
</div>

SCSS

.popup-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms ease-in-out;
  opacity: 0;
  z-index: -1;
  &.visible {
    z-index: 1;
    opacity: 1;
  }
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
  h2 {
    margin-top: 0;
    color: #333;
  }
  &-close {
    float: right;
    margin: 0;
    padding: 0;
    transition: all 200ms;
    color: #333;
    img {
      height: 47px;
      width: 47px;
      margin: 12px;
    }
  }
}

@media screen and (max-width: 700px) {
  .popup {
    width: 70%;
  }
}

JavaScript

//When you press the escape key, the modal closes
//When you click outside the popup, the modal closes
var KEYCODE_ESC = 27;

$('.pricing-sheet-link').click(function(e) {
  var href = $(this).attr('href');
  $(href).addClass('visible');
});

$('.popup-overlay, .popup-close').on('click', '.popup', function(e) {
  e.stopPropagation();
});

$('.popup-overlay').click(function(e) {
  $(this).removeClass('visible');
});

$('.popup-close').click(function(e) {
  $('.popup-overlay').removeClass('visible');
});

$(document).keyup(function(e) {
  if (e.keyCode == KEYCODE_ESC) $('.popup-overlay').removeClass('visible');
});