JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxes">
  <div id="dialog" class="window">

  </div>
  <div id="mask"></div>
</div>

CSS

#mask {
  position: absolute;
  left: 0;
  top: 0px;
  width: 100% !important;
  height: 750px !important;
  z-index: 9000;
  background-color: #fff;
  display: none;
}

#boxes .window {
  position: absolute;
  left: 0 !important;
  top: 0px !important;
  width: 100%;
  height: 750px;
  display: none;
  z-index: 9999;
  padding: 20px;
  text-align: center;
}

#boxes #dialog {
  left: 0 !important;
  top: 0px !important;
  width: 100%;
  height: 750px;
  padding: 10px;
  background-color: #ccc;
  font-family: 'Segoe UI Light', sans-serif;
  font-size: 15pt;
}

JavaScript

$(document).ready(function() {

  var id = '#dialog';

  $(id).html(`<iframe src="https://www.theonion.com/" frameborder="0" width="100%" height="100%" ></iframe>`);

  //Get the screen height and width
  var maskHeight = $(document).height();
  var maskWidth = $(window).width();

  //Set heigth and width to mask to fill up the whole screen
  $('#mask').css({
    'width': maskWidth,
    'height': maskHeight
  });

  //transition effect
  $('#mask').fadeIn(500);
  $('#mask').fadeTo("slow", 0.9);

  //Get the window height and width
  var winH = $(window).height();
  var winW = $(window).width();

  //Set the popup window to center
  $(id).css('top', winH / 2 - $(id).height() / 2);
  $(id).css('left', winW / 2 - $(id).width() / 2);

  //transition effect
  $(id).fadeIn(500);

  //if close button is clicked
  $('.window .close').click(function(e) {
    //Cancel the link behavior
    e.preventDefault();

    $('#mask').hide();
    $('.window').hide();
  });

  //if mask is clicked
  $('#mask').click(function() {
    $(this).hide();
    $('.window').hide();
  });

});