如何在 jQuery 覆盖弹出窗口中加载外部页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2238952/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I load an external page in a jQuery overlay popup?
提问by avorhom
I'm trying to make a jQuery overlay load an external page.
我正在尝试使 jQuery 覆盖加载外部页面。
I think I'm having two versions of jquery conflicting with each other, as I'm using this for a drag and drop and it works fine:
我想我有两个版本的 jquery 相互冲突，因为我使用它进行拖放并且它工作正常：
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 the overlay it doesn't seem to work. Does anyone have a simple overlay with external page?
对于覆盖它似乎不起作用。有没有人有一个带有外部页面的简单叠加层？
回答by Shakeeb Ahmed
But why you are not using Fancybox or more better colorbox here is the link
但是为什么你不使用 Fancybox 或更好的 colorbox 这里是链接
http://colorpowered.com/colorbox/
http://colorpowered.com/colorbox/
Colorbox is light have cool effect just give it a try, and you can theme it as it is css-based.
Colorbox 很轻，有很酷的效果，试试吧，你可以把它作为主题，因为它是基于 css 的。
Thanks
谢谢
回答by adardesign
HTML
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
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
JS
$("a#selector").live("click", function(){
$(".overlayInner").load("externalPage.html",
// the following is the callback
function(){$(".overlayOuter").fadeIn(300); })
});
回答by Cino Jose
回答by deepcell
I think this is exactly what you are looking for:
我认为这正是您要寻找的：
