Link to home
Start Free TrialLog in
Avatar of jbrashear72
jbrashear72

asked on

Need a jquery pop out that uses an iframe.

I need to click on a link in my site and have a window over lay the screen line in a lightbox were the rest of the screen goes dark/grey. The content in this box, dialog/lightbox needs to come from an iframe. I need to be able to stay with in the iframe till the search is done and and the 2nd page it loads is complete then have a button that allows me to close the query over lay.

How is this done? I need help with this step by step.

Thank you.
Avatar of jbrashear72
jbrashear72

ASKER

Here is what I have so far:

It is tied to <a> correct?

I need to have it tied to a class or ID how do I do that? This wany not every link comes up in a dialog.
<html>
<head>
	<link rel="stylesheet" href="./styles/smoothness/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" />
	<script type="text/javascript" src="./scripts/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="./scripts/jquery-ui-1.7.2.custom.min.js"></script>
	<script type="text/javascript">
	$(function() {
		$('a').click(function(e) {
			e.preventDefault();
			var $this = $(this);
			var horizontalPadding = 30;
			var verticalPadding = 30;
	        $('<iframe id="externalSite" class="externalSite" src="' + this.href + '" />').dialog({
	            title: ($this.attr('title')) ? $this.attr('title') : 'External Site',
	            autoOpen: true,
	            width: 800,
	            height: 500,
	            modal: true,
	            resizable: true,
				autoResize: true,
	            overlay: {
	                opacity: 0.5,
	                background: "black"
	            }
	        }).width(800 - horizontalPadding).height(500 - verticalPadding);	        
		});
	});
	</script>
</head>
<body>
	<ul>
		
		<li><a id="imdb" href="http://www.test.com/imdb" title="IMDB Movie Search">imdb - internal search</a></li>
		<li><a href="http://imdb.com" title="IMDB Site">IMDB</a></li>
	</ul>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of jbrashear72
jbrashear72

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