Loading external pages into overlay
The following button opens an overlay whose contents are loaded from an external URL:standalone demo
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.
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.
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.