main.js

//adding a close button to the overlay and bind a click on it to close the overlay
$(document).ready(function() {
  var winWidth = $(window).width();
  var winHeight = $(window).height();
  var edgeSpace = 40;
  var iframeWidth = winWidth - edgeSpace * 2;
  var iframeHeight = winHeight - edgeSpace * 2;
  
  $('#demo').click(function() {
    //add a close anchor inside the overlay div
    $('body').append('<div id="demoarea"><iframe src="'+$(this).attr('href')+'" width="'+iframeWidth+'" height="'+iframeHeight+'"></iframe><a href="#close" id="close"></a></div>');

    $('#demoarea').css({
      'position'            : 'fixed',
      'top'                 : edgeSpace+'px',
      'left'                : edgeSpace+'px',
      'background'          : 'white',
      'max-height'          : iframeHeight+'px',
      'box-shadow'          : '0 0 '+edgeSpace+'px black',
      '-moz-box-shadow'     : '0 0 '+edgeSpace+'px black',
      '-webkit-box-shadow'  : '0 0 '+edgeSpace+'px black',
    }).children('#close').css({ //style the close anchor
      'position'            : 'absolute',              //make it position absolute to the overlay div
      'top'                 : '-15px',                 //position it to top
      'left'                : '-15px',                 //and to left
      'display'             : 'block',                 //make it a block
      'width'               : '30px',                  //set width of background image
      'height'              : '30px',                  //and height
      'background'          : 'url(images/close.png)'  //and the actual url of the background image
    }).click(function() { //bind a click on the close anchor
      $(this).parent().remove(); //remove the overlay div from the dom
      return false; //dont follow the link
    });
    
    return false;
  });
});