如何在jQuery叠加弹出窗口中加载外部页面?

时间:2010-02-10 17:30:36

标签: jquery jquery-ui

我正在尝试使jQuery叠加层加载外部页面。

我认为我有两个版本的jquery相互冲突,因为我使用它进行拖放操作并且工作正常:

src="js/jquery-1.3.2.min.js

js/jquery-ui-1.7.2.custom.min.js 

现在我添加这个:

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

对于叠加它似乎不起作用。有没有人有外部页面的简单叠加?

4 个答案:

答案 0 :(得分:9)

但是为什么你没有使用Fancybox或更好的颜色框这里是链接

http://colorpowered.com/colorbox/

Colorbox很轻,有很酷的效果,试试吧,你可以将它作为基于CSS的主题。

由于

答案 1 :(得分:6)

<强> 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); })
});

答案 2 :(得分:1)

答案 3 :(得分:0)

我认为这正是您所寻找的:

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