<a href="#modal" class="popup-btn">Click Me!</a>

<div id="modal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close"><i class="fa fa-times-circle" aria-hidden="true"></i></button>
        <h4 class="modal-title">Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc laoreet egestas justo, in scelerisque nisi facilisis vel. Maecenas convallis magna vitae dui efficitur, a tincidunt diam cursus. Fusce malesuada ligula elit, id ornare elit mattis nec. Etiam scelerisque eu tellus tincidunt tincidunt. Sed facilisis lacinia auctor. Nullam a molestie neque, pretium cursus turpis.</p>
        <p>Aliquam non pulvinar nunc, id tristique magna. Donec tempor vehicula urna ut semper. Suspendisse eget commodo magna, eu tincidunt diam. Maecenas dapibus urna ornare, sagittis quam vel, convallis eros. Praesent eu nibh sit amet turpis fermentum auctor. Integer consectetur mi nec leo mollis tempor. Sed semper massa eros, quis elementum ligula suscipit in. Maecenas sed nibh ac arcu rhoncus pharetra.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn">Close</button>
      </div>
    </div>
  </div>
</div>

/* Please ❤ this if you like it! */

@import url("//fonts.googleapis.com/css2?family=Luckiest+Guy&family=Rubik&display=swap");

* {
  box-sizing: border-box;
  outline: none;
}

body {
  margin: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
  font-family: "Luckiest Guy", cursive;
  color: #333333;
  background-color: cadetblue;
  background-image: url("//images.pexels.com/photos/2762179/pexels-photo-2762179.jpeg?auto=compress&cs=tinysrgb&h=1280&w=1920"); /* Photo by Roberto Nickson from Pexels */
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.popup-btn {
  display: inline-block;
  padding: 0.5rem 2rem;
  border: 15px double #333333;
  text-decoration: none;
  color: #333333;
  background: wheat;
  font-size: 8vw;
  cursor: pointer;
  border-radius: 0.5rem;
  transform: scale(1, 1) skew(-5deg, -5deg);
  transition: all 400ms ease 0s;
  box-shadow: 0px 0px 5px 0px white;
  font-family: "Luckiest Guy", cursive;
}

.popup-btn:hover {
  transform: scale(1.2, 1.2) skew(-5deg, -5deg);
  transition: all 400ms ease 0s;
}

.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
  pointer-events: none;
}
.modal-backdrop.fade {
  opacity: 0;
  filter: alpha(opacity=0);
}
.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.fade.in {
  opacity: 1;
}
.modal-backdrop.in {
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.modal-open {
  overflow: hidden;
}
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}
.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}
.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  -o-transform: translate(0, -25%);
  transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
  transition-delay: 0.2s;
}
.modal-content {
  position: relative;
  background-color: #fff;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
  outline: 0;
}
.modal-body p {
  line-height: 28px;
}
.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}
.modal-header:before,
.modal-header:after,
.modal-footer:before,
.modal-footer:after {
  content: " ";
  display: table;
}
.modal-header:after,
.modal-footer:after {
  clear: both;
}
.close {
  float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.2;
  filter: alpha(opacity=20);
}
button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  font-family: inherit;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.modal-header .close {
  margin-top: -2px;
  margin-left: 10px;
}
.modal-title {
  margin: 0;
  line-height: 1.42857143;
  color: inherit;
  font-size: 18px;
  font-weight: normal;
}
.modal-body {
  position: relative;
  padding: 15px;
  font-family: "Rubik", sans-serif;
}
.modal-footer {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}
.modal .btn {
  font-family: inherit;
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.modal .btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
.modal .btn-default:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
  text-decoration: none;
}
.modal .btn-default:focus {
  color: #333;
  background-color: #e6e6e6;
  border-color: #8c8c8c;
}
.modal .btn:active,
.modal .btn.active {
  outline: 0;
  background-image: none;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.modal .btn:focus,
.modal .btn:active:focus,
.modal .btn.active:focus,
.modal .btn.focus,
.modal .btn:active.focus,
.modal .btn.active.focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.modal .btn-default:active,
.modal .btn-default.active,
.modal .open > .dropdown-toggle.btn-default {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.modal .btn-default:active,
.modal .btn-default.active,
.modal .open > .dropdown-toggle.btn-default {
  background-image: none;
}

@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  }
}

$(".popup-btn").click(function (e) {
  e.preventDefault();
  var linkID = this.hash.replace("#", "");
  $(".modal").each(function () {
    var modalID = $(this).attr("id");
    if (linkID === modalID) {
      $(this).fadeIn(200);
      $("body, html").addClass("modal-open");
      $(".modal-backdrop").addClass("in");
      $(this).addClass("in");
    } else {
      $(this).fadeOut();
      $(this).removeClass("in");
    }
  });
});
$("body, button.close, .modal-footer button.btn").click(function () {
  $("body, html").removeClass("modal-open");
  $(".modal-backdrop").removeClass("in");
  $(".modal").fadeOut();
  $(".modal").removeClass("in");
});
$(".modal-content, .popup-btn, .modal-header .close, .modal-footer .btn").click(
  function (e) {
    e.stopPropagation();
  }
);