2009-12-02 63 views
2

我有一個jQuery UI對話框,它是Modal並顯示一個彈跳效果。我使用主題背景變暗的條紋圖像。 第一次打開對話框時,條紋背景也會在反彈效果期間覆蓋對話框。彈跳效果完成後,對話框將變爲模態並顯示在條紋背景前面。 在下一次打開時,對話框立即在背景前彈起。如何在show-effect中創建jQuery UI對話框模態?

如何讓對話框馬上出現在背景前?

回答

2

湯姆的回答指出我正確的方向,而螢火蟲是非常有用的!

對話框被包裹在其以UI \ effects.core.js 的createWrapper函數生成我添加了一個參數「z索引= 1005」一個<div class="ui-effects-wrapper">(只是要確定)那裏。

所以在jQuery的用戶界面,它1.7.2.custom.min.js現在看起來是這樣的

createWrapper:function(f){if(f.parent().is(".ui-effects-wrapper")){return f.parent()}var g={width:f.outerWidth(true),"z-index":1005,height:f.outerHeight(true),"float":f.css("float")};f.wrap('<div class="ui-effects-wrapper" style="font-size:100%;border:none;margin:0;padding:0;z-index:1002"></div>'); 

不知道這是最好的方式,但它的工作原理。

+0

好的工作。一旦手風琴在動畫中變得更寬時,我的情況與靜止時相似。這導致頁面佈局跳躍。我也必須修改庫源代碼。不是超級乾淨,但我沒有看到其他方式。所以不要覺得太糟糕了;-) – 2009-12-02 13:46:50

1

這聽起來像直到動畫之後才分配對話框的zIndex。在你的CSS試試這個:

.ui-dialog { 
    z-index: 1002; 
} 

對話框通常有這個CSS類,並覆蓋通常具有1000 zIndex的(至少在我目前使用的版本)。如果這不起作用,請嘗試找出(使用Firebug),只有在動畫期間指定了其他類別,併爲這些類別指定zIndex。