2013-02-18 75 views
4

我有一個需要創建一個請等待頁面使用jQuery 1.6.2爲現有的jsp頁面。我能夠讓div覆蓋層工作,並請在頁面中心的模式窗口中等待動畫。但是,疊加層僅覆蓋其中一個框架集,即中心框架集。如何將div覆蓋在framesets上?

HTML結構基本上是(我留下了很多出去的清晰度):

... 
<frameset > 
    <frame id="topMostFrame"> 
    <frameset> 
    <frame id="leftMostframe"> 
    <frame id="centerMostFrame"> 
    </frameset> 
</frameset> 
<noframes> 
</noframes> 
</body> 
</html> 

JQUERY

function getTheOverlay(){ 
    $(document).ready(function() { 
     $("#loading-div-background").css({opacity: 0.5}); 
     $("#loading-div-background").show(); 
     //alert("In getOverlay!"); 
    }); 
} 

function remove(){ 
    $(document).ready(function() { 
     $('#loading-div-background').hide(); 
    }); 
} 

HTML

<div id="loading-div-background" style="display:none" class="ui-widget"> 
    <div id="loading-div" class="ui-corner-all"> 
     <img style="height:80px;margin:50px;" src="/images/loading.gif" alt="Loading.."/> 
    </div> 
</div> 

CSS

#loading-div-background { 
    display:none; 
    position:absolute; 
    top:0; 
    left:0; 
    background:gray; 
    width:100%; 
    height:100%; 
    /* Next 2 lines IE8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); 
} 

#loading-div { 
    width: 300px; 
    height: 200px; 
    background-color: #ffffff; 
    text-align:center; 
    position:absolute; 
    left: 50%; 
    top: 50%; 
    margin-left:-150px; 
    margin-top: -100px; 
} 

我試圖移動HTML我jQuery的功能加載,但它並沒有顯示在IE8的覆蓋。我也有一段時間讓IE8與覆蓋層一起工作,但是使用上面的CSS修復了這個問題。

我需要禁用左邊框架上的鏈接,這可能是我將要使用的方法,或者覆蓋它們。是的,我知道框架不好,但那是我得到的。

我不能覆蓋覆蓋其他框架集並覆蓋整個頁面。我已經讀過,這是不可能與框架,雖然我猜可能有一個解決方法。但是,當我使用警報進行調試時,覆蓋層將覆蓋整個頁面。

我的問題是:爲什麼使用警報使覆蓋物覆蓋了一切?還有什麼我可以做到的,即使對於框架集也能獲得相同的效果?

+0

你可以發佈與生成覆蓋圖相關的代碼嗎?理論上,只需使用具有比框架集更高z-index css屬性的div就可以獲得疊加效果......但是,框架集當然不會被棄用。我仍然有一個感覺z-索引:會工作壽。 – rnirnber 2013-02-18 19:11:55

+0

如何爲'#loading-div-background'設置'z-index'值爲99999? – sdespont 2013-02-18 20:31:12

回答

3

我面臨同樣的問題,這是我發現,爲我工作。

一個框架基本上是一個窗口對象。所有關於窗口的規則都適用於框架。一個div屬於一個窗口內的文檔。由於文檔不能離開它的窗口,div不能離開它的窗口。您要求在瀏覽器級別進行控制,但您允許的只有文檔級別的控制權限。

但是,您可以通過iframe而不是框架集來執行DIV。

UPDATE:

拿這個例子我的朋友,花了一些時間讓我去解決它,但是說真的,StackOverflow上也幫了我很多,所以我覺得我必須把這個例子在這裏幫助其他。

這是頁面容器的html,它包含一個iframe,它將請求您要覆蓋的頁面框架集。

<head> 
<style type="text/css"> 
    html, body#mybcontainer_body{margin:0px;padding:0px;border:none;height:100%;width:100%;} 
    #mybcontainer_div{position:absolute;top:0px;bottom:0px;left:0px;right:0px;} 
    #mybcontainer_iframe{position:absolute;top:0%;left:0%;height:100%;width:100%;} 
</style> 
</head> 
<body id="mybcontainer_body" > 
<div id="mybcontainer_dialog" style="display:none;">Some Text Here</div> 
    <div id="mybcontainer_div"><iframe id="mybcontainer_iframe" border="0" frameborder="0" scrolling="no" noresize="noresize" src="page-two-contain-frameset"></iframe></div> 
    </body> 

我問候

+0

frameset工作沒有身體和每個框架被認爲是一個窗口,和div必須在體內,對我來說,我通過使div與i頁面在頁面1,並使iframe加載頁面2包含框架集,並且當我想使用對話框或警告在page1內部框架集請求div,祝你好運 – Mhmd 2013-02-21 15:16:59

+0

我們將從框架集遷移,但我現在需要一個可行的解決方案來修復一個生產bug。感謝所有的幫助! – 2013-02-21 16:01:51

+0

檢查示例,對於我現在我可以在所有框架上顯示對話框div,只需檢查示例以及它是一個很好的解決方案。 – Mhmd 2013-02-21 16:09:00

0

我結束了使用顯示/隱藏在從開羅解決方案的交代後的框架。這確實奏效,但我不相信用一個div覆蓋多個框架集是可能的。

這是我使用的代碼:

$('#divName a',top.frames['leftframe'].document).show(); 
$('#divName a',top.frames['leftframe'].document).hide(); 

然後我用我作爲一個覆蓋主框架創建div結合工作與這個那個的解決了這個問題。