Easy Homepage Takover

easy-takover.js

$(document).ready(function() {  

  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(500); 
  $('#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',  100);
  $(id).css('left', '15%');
    
  //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();
  });
  
});

//HTML

<div id="boxes">
  <div id="dialog" class="window center">
    <h1>GOING SOLAR JUST GOT<br /> EVEN CHEAPER!</h1>
    <p><b>Now until January 28th at 5pm MST, Rocky Mountain Power</b> is offering YOU the opportunity to receive THOUSANDS toward your home or business solar installation. <b>THOUSANDS!</b></p>
	<p>And that’s on top of the enormous Federal and State incentives already available.</p>
	<h2>THERE’S NO TIME TO WAIT. CALL US AT 1-877-413-6412</h2>
	<p>SunPower by Legend Solar wants to help you cash-in! Contact us right away for more details or to get the application process started.</p>
  	<img width="430" src="<?php rumor_img_path('logo.png'); ?>" alt="">
  </div>
  <div id="mask">
  	<div id="popupfoot"> <a href="#" class="close"><img width="25" src="<?php rumor_img_path('icon-close-takover.png'); ?>" alt=""></a> </div>
  </div>
</div>

// SCSS

/*** HOMEPAGE TAKEOVER ***/
#mask {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9000;
  background-color: rgba(255, 255, 255, 0.95);
  display: none;
}

#boxes .window {
  position: absolute;
  left: 0;
  top: 0;
  width: 70%;
  height: auto;
  display: none;
  z-index: 9999;
  text-align: center;
}

#boxes #dialog {
  width: 70%;
  height: auto;
  line-height: 0;
  h1 {
  	font-size: 50px;
  	line-height: 55px;
  	font-weight: bold;
  }
  p {
  	font-size: 18px;
  	line-height: 27px;
  }
}

#popupfoot {
  position: absolute;
  top: 40px;
  right: 50px;
}