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.

Code:
<head>
	<title>jQuery Tools standalone demo</title>

	<!-- include the Tools -->
	<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>

	 

	<!-- standalone page styling (can be removed) -->
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>	


	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/overlay-apple.css"/>
	
	<style>
	
	/* use a semi-transparent image for the overlay */
	#overlay {
		background-image:url(http://static.flowplayer.org/img/overlay/transparent.png);
		color:#efefef;
		height:450px;
	}
	
	/* container for external content. uses vertical scrollbar, if needed */
	div.contentWrap {
		height:441px;
		overflow-y:auto;
	}
	</style>
	
</head>

<body>



<!-- external page is given in the href attribute (as it should be) -->
<a href="http://www.google.com" 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>

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

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

	});
});
</script>

</body>

</html>

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.
ASKER CERTIFIED SOLUTION
Avatar of Proculopsis
Proculopsis

Link to home
membership
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

ASKER

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
Proculopsis


Try this instead:

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

ASKER

Thank you, works like a charm.