overlay.js

overlay.js

var overlayContent = '<h2 style="margin-top: 3px;color:#96ffd7;">Headline</h2>';
  overlayContent += '<p>Lorem ipsum dolor...</p>';
var overlayBGCol = '#FFF';
var overlayTxtCol = '#000';
window.overlay = ('<div id="overlay" style="display: none; width: 100%; height: 100%; background: rgba(0,0,0, .58); z-index: 20000; position: fixed; text-align: center;top:0px;"><div id="overlay-container" style="width: 600px;height: auto;padding: 17px;background: '+overlayBGCol+';color:'+overlayTxtCol+' !important; display: inline-block;top: 40px;position: relative;border-radius: 30px;-webkit-border-radius: 30px;text-align: left;">'+overlayContent+'<span class="this-overlay-close" style="margin: -20px -4px 0px 0px;position: absolute;top: 21px;right: 11px;color: #CCC;padding: 2px 8px;font-size: 23px;border-bottom-left-radius: 0.7em;-webkit-border-bottom-left-radius: 0.7em;border-top-right-radius: 1.3em;-webkit-border-top-right-radius: 1.3em;cursor: pointer;font-weight: bold;">x</span></div>');

jQuery('body').append(window.overlay);
jQuery('head').append('<style type="text/css">@media only screen and (max-width:737px){#overlay-container{width: 100% !important; top:50px !important;}}</style>');

window.addOverlay = function() {
  jQuery('#overlay').fadeIn("slow");
  jQuery('.this-overlay-close').bind('click', function(){
    jQuery('#overlay').fadeOut("fast");
  });
}()