External Pages into Overlay Loading

HTML

    <form id="myform" action="#">

     <h3>Registration Form</h3>

     <div id="inputs">

     <!-- username -->

  <label for="username">Username</label>

  <input id="username" title="Must be at least 8 characters."/><br />

     <!-- password -->

  <label for="password">Password</label>

  <input id="password" type="password" title="Try to make it hard to guess." /><br />

     <!-- email -->

  <label for="email">Email</label>

  <input id="email" title="We won't send you any marketing material." /><br />

     <!-- message -->

  <label for="body">Message</label>

  <textarea id="body" title="What's on your mind?"></textarea><br />

     <!-- message -->

  <label for="where">Select one</label>

  <select id="where" title="Select one of these options">

  <option>-- first option --</option>

  <option>-- second option --</option>

  <option>-- third option --</option>

  </select>

  <br />

  </div>

     <!-- email -->

  <label>

      I accept the terms and conditions

  <input type="checkbox" id="check" title="Required to proceed" />

  </label>

     <p>

  <button type="button" title="This button won't do anything">Proceed</button>

  </p>

    </form>

CSS

/* use a semi-transparent image for the overlay */
#overlay {
 background-image:url(white.png);
 color:#efefef;
 height:450px;
}
 
/* container for external content. uses vertical scrollbar, if needed */
div.contentWrap {
 height:441px;
 overflow-y:auto;
}

Javascript

$(function() {
    // if the function argument is given to overlay,
  // it is assumed to be the onBeforeLoad event listener
  $("a[rel]").overlay({
  
   mask: 'darkred',
   effect: 'apple',
  onBeforeLoad: function() {
  // grab wrapper element inside content
  var wrap = this.getOverlay().find(".contentWrap");
  
  // load the page specified in the trigger
  wrap.load(this.getTrigger().attr("href"));
  }
  });
});

View Example