Link to home
Start Free TrialLog in
Avatar of pixalax
pixalaxFlag for Poland

asked on

Jquery Tools - Overlay External Page can't display

Hello all,
I'm using Jquery Tools as a library. I would like to open external page in modal box (overlay). I'm having an issue with opening external page inside of my div element.

	<title>jQuery Tools standalone demo</title>

	<!-- include the Tools -->
	<script src=""></script>


	<!-- standalone page styling (can be removed) -->
	<link rel="stylesheet" type="text/css" href=""/>	

	<link rel="stylesheet" type="text/css" href=""/>
	/* use a semi-transparent image for the overlay */
	#overlay {
	/* container for external content. uses vertical scrollbar, if needed */
	div.contentWrap {


<!-- external page is given in the href attribute (as it should be) -->
<a href="" 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>	

<!-- another link. uses the same overlay -->
<a href="external-content2.htm" rel="#overlay" style="text-decoration:none">
	<button type="button">Show another page</button>

<!-- overlayed element -->

<div class="apple_overlay" id="overlay">

	<!-- the external content is loaded inside this tag -->
	<div class="contentWrap"></div>


<!-- make all links with the 'rel' attribute open overlays -->

$(function() {

	// if the function argument is given to overlay,
	// it is assumed to be the onBeforeLoad event listener

		mask: 'darkred',
		effect: 'apple',

		onBeforeLoad: function() {

			// grab wrapper element inside content
			var wrap = this.getOverlay().find(".contentWrap");

			// load the page specified in the trigger




Open in new window

Here I can open the modal box, but I can't open the external page inside of the div element (Div element is visible).

I will be glad if anyone can help me out. Thank you for your help in advance.
Avatar of Proculopsis

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of pixalax


Hello Proculopsis,

 Thank you for your reply. It is quite acceptable except one thing. When I include it to my page, under <div class="apple_overlay" id="overlay"> </div> nothing is displayed (like footer).

 Could you guide me how to solve it (except adding it under the page)?

 Thank you for your time.
Avatar of Proculopsis

Try this instead:

<iframe class="contentWrap"></iframe>
Avatar of pixalax


Thank you, works like a charm.