How to load external page in jQuery popup?

Question

I am trying to make jQuery overhead external.

I think I have two versions of jquery conflicting with each other since I use this for drag and drop and works great:

src="js/jquery-1.3.2.min.js js/jquery-ui-1.7.2.custom.min.js 

Now when I add this:

 http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js 

for overlay it doesn't seem to work. Does anyone have a simple overlay with an external page?

Answer 1

But why don't you use Fancybox or better colorbox, here is the link

http://colorpowered.com/colorbox/

Colorbox is a light that has a wonderful effect, just try it and you can use it because it is based on CSS.

thanks

Answer 2

HTML

 <a id="selector" href="#">My event trigger</a> <!-- put the the overlay below before closing </body> the end of the page --> <div class="overlayOuter"> <div class="overlayInner"> <!-- external content to be loaded here --> </div> </div> 

CSS

 .overlayOuter{ background:#000; opacity:0.7; display:none; height:100%; left:0; position:absolute; top:0; width:100%; z-index:100001; } .overlayInner{ position:absolute; top:40%;/*or whatever*/ left:40% /*or whatever*/ width:500px; z-index:100001; } 

Js

 $("a#selector").live("click", function(){ $(".overlayInner").load("externalPage.html", // the following is the callback function(){$(".overlayOuter").fadeIn(300); }) }); 

Answer 3

http://jquerytools.org/demos/overlay/external.html

Answer 4

I think this is exactly what you are looking for:

http://flowplayer.org/tools/demos/overlay/external.htm