JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
<!-- Start alert block -->
<div id='boxes'>
<div id='alert' class='window'>
some text...
<input type="button" id="button" value="okay modal" class='close warn_buttons'/>
</div>
<!-- Mask -->
    <div id='mask'></div>
</div>
<!-- End alert block -->
<!-- start under content-->
<div>
<p>under content</p>
</div>

CSS

#mask {
 background-color:#333333;   
}

JavaScript

//cookie based modal window
//start script
$(document).ready(function() { 
    
 //Put in the DIV id you want to display
 launchWindow('#alert'); 
 //if close button is clicked
 $('.window .close').click(function (e) {
  $('#mask').hide();
  $('.window').hide();
 });  
});

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

function launchWindow(id) {

  //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.95); 
  //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);
}
//end script

//start script
$(function()
{
$('#button').click(function(e)
{
$.cookie('the_cookie', '1', { expires: 999 });
  if(!$.cookie('the_cookie')){
  launchWindow('#alert');
}
});
});
//end script