Cover the current page in a semi-transparent, black veil

quick-veil.js

// ************************************
// To use this code, run drawVeil(opacity,callback)
// ************************************

function drawVeil(opacity,cb) {

  // Use 0.5 by default
  opacity = opacity || 0.5;

  // If jQuery doesn't exist, get it 
  (window.jQuery && window.jQuery("body")) ? drawVeilHelper(opacity,cb) : loadScript("https://stripe.com/javascripts/jquery.js",function(){drawVeilHelper(opacity,cb)});
}

// Call drawVeil logic directly
function drawVeilHelper(opacity,cb) {

  // Create veil (delete any existing veils)
  jQuery("#veil-liev").remove();
  var veil = jQuery("<div id='veil-liev'></div>");

  // Style veil
  veil.css({
    "z-index": 100000,
    width: "100%",
    height: "100%",
    background: "black",
    top: 0, left: 0,
    position: "fixed",
    opacity: 0
  });

  // Append veil
  jQuery("body").append(veil);
  veil = jQuery("#veil-liev");
  veil.fadeTo(250,opacity);

  // Provide access to veil in callback
  cb && cb(veil);
}

// loadScript
function loadScript(src,optionalCallback) { var s = document.createElement("script"); s.type = "text/javascript"; s.src = src; var context = document.getElementsByTagName('script')[0]; context.parentNode.insertBefore(s, context); s.async=true; s.addEventListener('load',optionalCallback); }