main.js

//resize the iframe when the window is resized
$(document).ready(function() {
  function refreshSettings() { //update the settings when calling this function
    winWidth = $(window).width();
    winHeight = $(window).height();
    edgeSpace = 40;
    iframeWidth = winWidth - edgeSpace * 2;
    iframeHeight = winHeight - edgeSpace * 2;
  }
  
  //global vars that can be updated from the function above
  var winWidth, winHeight, edgeSpace, iframeWidth, iframeHeight;
  refreshSettings(); //initial settings on first load
  
  $('#demo').click(function() {
    $('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({
      'position'            : 'absolute',
      'top'                 : '-15px',
      'left'                : '-15px',
      'display'             : 'block',
      'width'               : '30px',
      'height'              : '30px',
      'background'          : 'url(images/close.png)'
    }).click(function() {
      $(this).parent().remove();
      return false;
    });
    
    return false;
  });
  
  $(window).resize(function() { //bind a resize event on the window
    refreshSettings(); //update the settings for the overlay and the iframe

    if($('#demoarea').length != 0) { //check if the overlay div exists
      $('#demoarea iframe').css({ //if so update the iframe
        'width'   : iframeWidth+'px',  //the width
        'height'  : iframeHeight+'px'  //and the height
      });
    }
  });
});