JSFiddle - React, Tailwind, and code Playground

HTML

<p>Some content... AAAA</p>
<p>Some content... AAAA</p>
<p>Some content... AAAA</p>
<p>Some content... AAAA</p>
<p>Some content... AAAA</p>
<p>Some content... AAAA</p>
<p>Some content... AAAA</p>
<p>Some content... AAAA</p>
<p>Some content... AAAA</p>
<p>Some content... AAAA</p>
<p>Some content... AAAA</p>
<p>Some content... AAAA</p>
<p>Some content... AAAA</p>
<p>Some content... AAAA</p>
<p>Some content... AAAA</p>
<p>Some content... AAAA</p>
<p>Some content... AAAA</p>
<p>Some content... AAAA</p>
<p>Some content... AAAA</p>
<p>Some content... AAAA</p>
<p>Some content... AAAA</p>
<p>Some content... AAAA</p>
<p>Some content... AAAA</p>
<p>Some content... AAAA</p>
<p>Some content... AAAA</p>

<p>Some content... BBBB</p>
<p>Some content... BBBB</p>
<p>Some content... BBBB</p>
<p>Some content... BBBB</p>
<p>Some content... BBBB</p>
<p>Some content... BBBB</p>
<p>Some content... BBBB</p>
<p>Some content... BBBB</p>
<p>Some content... BBBB</p>
<p>Some content... BBBB</p>
<p>Some content... BBBB</p>
<p>Some content... BBBB</p>
<p>Some content... BBBB</p>
<p>Some content... BBBB</p>
<p>Some content... BBBB</p>
<p>Some content... BBBB</p>
<p>Some content... BBBB</p>
<p>Some content... BBBB</p>
<p>Some content... BBBB</p>
<p>Some content... BBBB</p>
<p>Some content... BBBB</p>
<p>Some content... BBBB</p>
<p>Some content... BBBB</p>
<p>Some content... BBBB</p>
<p>Some content... BBBB</p>

<p>Some content... CCCC</p>
<p>Some content... CCCC</p>
<p>Some content... CCCC</p>
<p>Some content... CCCC</p>
<p>Some content... CCCC</p>
<p>Some content... CCCC</p>
<p>Some content... CCCC</p>
<p>Some content... CCCC</p>
<p>Some content... CCCC</p>
<p>Some content... CCCC</p>
<p>Some content... CCCC</p>
<p>Some content... CCCC</p>
<p>Some content... CCCC</p>
<p>Some content... CCCC</p>
<p>Some content... CCCC</p>
<p>Some content... CCCC</p>
<p>Some content... CCCC</p>
<p>Some content... CCCC</p>
<p>Some content... CCCC</p>
<p>Some content... CCCC</p>
<p>Some content... CCCC</p>
<p>Some...

CSS

body {
  font-family: verdana;
  font-size: 15px;
}

a {
  color: #333;
  text-decoration: none
}

a:hover {
  color: #ccc;
  text-decoration: none
}

#mask {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9000;
  background-color: #000;
  display: none;
}

#boxes .window {
  position: fixed;
  left: 0;
  top: 0;
  width: 440px;
  height: 200px;
  display: none;
  z-index: 9999;
  padding: 20px;
}

#boxes #dialog {
  width: 640px;
  height: 400px;
  padding: 10px;
  background-color: #ffffff;
}

JavaScript

$(document).ready(function() {

  // Set some scroll for DEMO
  $(window).scrollTop(807);

  var id = '#dialog';

  //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(1000);
  $('#mask').fadeTo("slow", 0.8);

  //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(2000);

  // Disable scroll
  var winY = $(window).scrollTop();
  $("body").css("overflow", "hidden");
  $("body").css("position", "fixed");
 	$("body").css("top", -winY - 8); // 8 appears to be default body margin in FF

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

    // Restore scroll
    $("body").css("overflow", "");
    $("body").css("position", "");
    $("body").css("top", "");
    $(window).scrollTop(winY);
  });

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

    // Restore scroll
    $("body").css("overflow", "");
    $("body").css("position", "");
    $("body").css("top", "");
    $(window).scrollTop(winY);
  });

});