main.js

//check for the OS, if we are on a mac align the close button to the left, otherwise to the right
$(document).ready(function() {
  function refreshSettings() {
    winWidth = $(window).width();
    winHeight = $(window).height();
    edgeSpace = 40;
    iframeWidth = winWidth - edgeSpace * 2;
    iframeHeight = winHeight - edgeSpace * 2;
  }

  var winWidth, winHeight, edgeSpace, iframeWidth, iframeHeight;
  refreshSettings();
  
  //check if we are on a mac, if so set the align of the close anchor to left, otherwise to right (linux, windows)
  var align = navigator.appVersion.indexOf("Mac") != -1 ? "left" : "right";
  
  $('#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',
      'display'             : 'block',
      'width'               : '30px',
      'height'              : '30px',
      'background'          : 'url(images/close.png)'
    }).css(align, '-15px') //set the align in a extra css function on the close button. including it in the above css({}) will not work
    .click(function() {
      $(this).parent().remove();
      return false;
    });
    
    return false;
  });
  
  $(window).resize(function() {
    refreshSettings();

    if($('#demoarea').length != 0) {
      $('#demoarea iframe').css({
        'width'   : iframeWidth+'px',
        'height'  : iframeHeight+'px'
      });
    }
  });
});