title: Load an external page into overlay
body: <p>I face a problem in the following code which is used to load an external page into overlay when user clicks a button</p>
  
  <pre><code>        &lt;!DOCTYPE html&gt;
          &lt;html&gt;
              &lt;head&gt;
                  &lt;title&gt;jQuery Tools standalone demo&lt;/title&gt;
  
                  &lt;script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"&gt;&lt;/script&gt;
  
  
                  &lt;style&gt;
  
                      /* the overlayed element */
                      .apple_overlay {
  
                          /* initially overlay is hidden */
                          display:none;
  
                          /* growing background image */
                          background-image:url(images/white.png);
  
                          /*
                            width after the growing animation finishes
                            height is automatically calculated
                          */
                          width:640px;
  
                          /* some padding to layout nested elements nicely  */
                          padding:35px;
  
                          /* a little styling */
                          font-size:11px;
                      }
  
                      /* default close button positioned on upper right corner */
                      .apple_overlay .close {
                          background-image:url(images/close.png);
                          position:absolute; right:5px; top:5px;
                          cursor:pointer;
                          height:35px;
                          width:35px;
                      }
                  &lt;/style&gt;
              &lt;/head&gt;
  
              &lt;body&gt;
                  &lt;!-- external page is given in the href attribute (as it should be) --&gt;
                  &lt;a href="http://www.facebook.com/" rel="#overlay" style="text-decoration:none"&gt;
                      &lt;!-- remember that you can use any element inside the trigger --&gt;
                      &lt;button type="button"&gt;Show external page in overlay&lt;/button&gt;
                  &lt;/a&gt;
  
                  &lt;!-- another link. uses the same overlay --&gt;
                  &lt;a href="http://jquerytools.org/demos/overlay/external-content.htm" rel="#overlay" style="text-decoration:none"&gt;
                      &lt;button type="button"&gt;Show another page&lt;/button&gt;
                  &lt;/a&gt;
  
                  &lt;!-- overlayed element --&gt;
                  &lt;div class="apple_overlay" id="overlay"&gt;
                      &lt;!-- the external content is loaded inside this tag --&gt;
                      &lt;div class="contentWrap"&gt;&lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;!-- make all links with the 'rel' attribute open overlays --&gt;
                  &lt;script&gt;
                      $(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"));
                              }
  
                          });
                      });
                  &lt;/script&gt;
              &lt;/body&gt;
          &lt;/html&gt;
  </code></pre>
  
  <p>this code is taken from <a href="http://jquerytools.org/demos/overlay/external.html" rel="nofollow">http://jquerytools.org/demos/overlay/external.html</a>
  any idea please?</p>