JSFiddle - React, Tailwind, and code Playground

by brianlmerritt

HTML

<div id="popup" class="modal-box"> 
  <header>
    <a href="#" class="js-modal-close close">×</a>
    <h3><a href="http://www.jqueryscript.net/tags.php?/Modal/">Modal</a> Title</h3>
  </header>
  <div class="modal-body">
    <p>Modal Body</p>
  </div>
  <footer>
    <a href="#" class="js-modal-close">Close Button</a>
  </footer>
</div>
<p>Bacon ipsum dolor amet pork loin anim elit meatloaf cupidatat. Magna boudin ribeye elit do tri-tip. Corned beef flank anim shoulder, aute shankle sirloin leberkas id ut pariatur deserunt ad. Deserunt elit officia short ribs alcatra.</p><p>Brisket ham cupim, landjaeger lorem labore cillum velit nostrud. Fugiat t-bone ribeye fatback dolor tempor dolore bacon commodo. Non do commodo in pariatur, dolore kielbasa flank strip steak. Picanha tongue culpa est.</p><p>Ullamco chuck tongue pastrami consectetur jowl. Laboris labore ham, ut kevin lorem commodo mollit biltong bacon ball tip esse. Occaecat consequat enim, bacon sed pork chop kevin venison drumstick et andouille short ribs nisi irure tenderloin. Ball tip ribeye esse shankle velit pastrami do, ut laborum leberkas venison fatback bacon. Venison sirloin dolore boudin incididunt consequat tongue ut ex elit esse veniam culpa laborum occaecat. Esse laboris pork loin, shank anim ball tip pancetta pig drumstick. Ad aliqua beef, laborum ut officia laboris tri-tip shoulder.</p><p>Bresaola consequat jerky dolore, rump nisi velit spare ribs eiusmod beef ribs exercitation culpa. Strip steak proident meatloaf turkey. Laborum tenderloin hamburger ea non turducken venison landjaeger sed minim proident adipisicing pork pariatur. Swine shoulder hamburger do esse aliquip, chuck boudin voluptate. Tongue salami rump lorem laborum cillum. Rump aliqua landjaeger, nisi tenderloin pork belly ribeye cillum culpa cupim fatback salami.</p><p>Exercitation adipisicing enim hamburger, shoulder ribeye duis tri-tip cillum quis mollit in brisket. Sint ham hock beef ribs consequat chuck, cow pork turducken...

CSS

.modal-box {
  display: none;
  position: absolute;
  z-index: 1000;
  width: 98%;
  background: white;
  border-bottom: 1px solid #aaa;
  border-radius: 4px;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-clip: padding-box;
}

.modal-box header,
.modal-box .modal-header {
  padding: 1.25em 1.5em;
  border-bottom: 1px solid #ddd;
}

.modal-box header h3,
.modal-box header h4,
.modal-box .modal-header h3,
.modal-box .modal-header h4 { margin: 0; }

.modal-box .modal-body { padding: 2em 1.5em; }

.modal-box footer,
.modal-box .modal-footer {
  padding: 1em;
  border-top: 1px solid #ddd;
  background: rgba(0, 0, 0, 0.02);
  text-align: right;
}

.modal-overlay {
  opacity: 0;
  filter: alpha(opacity=0);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3) !important;
}

a.close {
  line-height: 1;
  font-size: 1.5em;
  position: absolute;
  top: 5%;
  right: 2%;
  text-decoration: none;
  color: #bbb;
}

a.close:hover {
  color: #222;
  -webkit-transition: color 1s ease;
  -moz-transition: color 1s ease;
  transition: color 1s ease;
}

@media (min-width: 32em) {
  .modal-box { width: 70%; }
}

JavaScript

$(function(){

var appendthis =  ("<div class='modal-overlay js-modal-close'></div>");

  $('a[data-modal-id]').click(function(e) {
    e.preventDefault();
    $("body").append(appendthis);
    $(".modal-overlay").fadeTo(500, 0.7);
    //$(".js-modalbox").fadeIn(500);
    var modalBox = $(this).attr('data-modal-id');
    $('#'+modalBox).fadeIn($(this).data());
  });  
  
  
$(".js-modal-close, .modal-overlay").click(function() {
  $(".modal-box, .modal-overlay").fadeOut(500, function() {
    $(".modal-overlay").remove();
  });
});
 
$(window).resize(function() {
  $(".modal-box").css({
    top: ($(window).height() - $(".modal-box").outerHeight()) / 2,
    left: ($(window).width() - $(".modal-box").outerWidth()) / 2
  });
});
 
$(window).resize();
 
});