main.js

//bind a click on #demo link and append the iframe in a div to the body, style the overlay
$(document).ready(function() {
  var winWidth = $(window).width();             //get the current window width
  var winHeight = $(window).height();           //get the current window height
  var edgeSpace = 40;                           //we want the overlay to be 40px away from the edge
  var iframeWidth = winWidth - edgeSpace * 2;   //calculate the actual width of the iframe
  var iframeHeight = winHeight - edgeSpace * 2; //calculate the actual height of the iframe
  
  $('#demo').click(function() { //bind a click event to the #demo link
    //append the overlay div with the iframe in it to the body
    //point the iframe src to the href of the clicked #demo link
    //set the initial height and width of the iframe
    $('body').append('<div id="demoarea"><iframe src="'+$(this).attr('href')+'" width="'+iframeWidth+'" height="'+iframeHeight+'"></iframe></div>');
    
    //style the overlay div with static position and some CSS3 box shadow
    $('#demoarea').css({
      'position'            : 'fixed',                      //fixed in the browser window
      'top'                 : edgeSpace+'px',               //the space from the top
      'left'                : edgeSpace+'px',               //the space from the left
      'background'          : 'white',                      //initial background will be white
      'max-height'          : iframeHeight+'px',            //remove a bottom border that the iframe produces
      'box-shadow'          : '0 0 '+edgeSpace+'px black',  //set the box shadow to black and blur
      '-moz-box-shadow'     : '0 0 '+edgeSpace+'px black',  //for gecko based browser such as firefox
      '-webkit-box-shadow'  : '0 0 '+edgeSpace+'px black',  //for webkit based browsers such as safari
    });
    
    return false; //dont follow the link
  });
});