This is a message.

Loading external pages into overlay

The following button opens an overlay whose contents are loaded from an external URL:

standalone demo

You can see the contents of the loaded page here and here.

HTML code

Our syntax is standard HTML where the external page is specified in the href attribute. This insures that even clients that don't support JavaScript can see the external page. This is called "progressive enhancement" in the JavaScript world. Note that we use an extra wrapper tag inside the overlay where the actual content is loaded: 

<!-- external page is given in the href attribute (as it should be) -->
<a href="external-content.htm" rel="#overlay" style="text-decoration:none">
  <!-- remember that you can use any element inside the trigger -->
  <button type="button">Show external page in overlay</button>
</a>
 
<!-- another link. uses the same overlay -->
<a href="external-content2.htm" rel="#overlay" style="text-decoration:none">
  <button type="button">Show another page</button>
</a>
 
<!-- overlayed element -->
<div class="apple_overlay" id="overlay">
  <!-- the external content is loaded inside this tag -->
  <div class="contentWrap"></div>
</div>

HTML

JavaScript code

The loading is done with the onBeforeLoad event which can be given directly as the first argument to the overlay constructor. This event loads the external content inside the wrapper element. Inside the event function the this variable is a pointer to the overlay API. 

$(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"));
        }
 
    });
});

JavaScript

Note: if you only want to load the external page the first time the overlay has been opened, you can wrap the load call inside of an if (wrap.is(":empty")) statement. In that case you cannot have multiple triggers that open up different URLs using the same overlay.

CSS code

We continue using our overlay-apple.css CSS file and override it with the following CSS settings. This time we used a semi-transparent background image for the overlay. This can be changed with CSS. We also used a scrollbar for the content which is only shown when necessary (little content does not make the scrollbar appear). This is a handy trick if you are not sure how large pages you are loading will be. 

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

CSS