JQuery UI模式對話框並不包含頁面

中的所有元素

我看到了this post，並且表現得很好，但它不能解決我的問題。我使用免費版CSS3 Menu創建了一些<ul><li></li></ul>菜單。當我打開JQuery UI模式對話框時，對話框不會覆蓋這些菜單，它們會停留在黑暗和對話框本身之上。我該怎麼辦？JQuery UI模式對話框並不包含頁面

我menues之一的CSS是如下：

ul#ptUsersMenu,ul#ptUsersMenu ul{ 
margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;} 

ul#ptUsersMenu ul{ 
display:none;position:absolute;right:0;top:100%;-moz-box-shadow:-3.5px 3.5px 5px #000000;-webkit-box-shadow:-3.5px 3.5px 5px #000000;box-shadow:-3.5px 3.5px 5px #000000;background-color:#303030;border-width:2px;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#FFF;padding:0 10px 10px;} 

ul#ptUsersMenu li:hover>*{ 
display:block;} 

ul#ptUsersMenu li{ 
position:relative;display:block;white-space:nowrap;font-size:0;float:left;} 

ul#ptUsersMenu li:hover{ 
z-index:1;} 

ul#ptUsersMenu{ 
font-size:0;position:relative;display:inline-block;zoom:1;padding:0; 
*display:inline;} 

* html ul#ptUsersMenu li a{ 
display:inline-block;} 

ul#ptUsersMenu>li{ 
margin:0;} 

ul#ptUsersMenu a:active, ul#ptUsersMenu a:focus{ 
outline-style:none;} 

ul#ptUsersMenu a{ 
display:block;vertical-align:middle;text-align:center;text-decoration:none;font:12px Tahoma,Geneva,sans-serif;color:#000;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:5px 1px 5px 1px;background-color:#ffbe18;background-image:url("../Images/css3menu/mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;} 

ul#ptUsersMenu ul li{ 
float:none;margin:10px 0 0;} 

ul#ptUsersMenu ul a{ 
text-align:right;padding:4px;background-color:#303030;background-image:none;border-width:0;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;font:12px Tahoma;color:#fff;text-decoration:none;text-shadow:#FFF 0 0 0;} 

ul#ptUsersMenu li:hover>a,ul#ptUsersMenu li a.pressed{ 
background-color:#968eff;border-color:#C0C0C0;border-style:solid;color:#000;text-shadow:#FFF 0 0 1px;background-image:url("../Images/css3menu/mainbk.png");background-position:0 100px;text-decoration:none;} 

ul#ptUsersMenu img{ 
border:none;vertical-align:middle;margin-left:5px;} 

ul#ptUsersMenu span{ 
display:block;overflow:visible;background-position:left center;background-repeat:no-repeat;padding-left:0px;} 

ul#ptUsersMenu ul li:hover>a,ul#ptUsersMenu ul li a.pressed{ 
background-color:#ffff7f;background-image:none;color:#000;text-decoration:none;text-shadow:#FFF 0 0 0;} 

ul#ptUsersMenu li.topfirst>a{ 
border-width:0;border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;} 

ul#ptUsersMenu li.toplast>a{ 
border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;}

和我這樣調用的對話框：

$("#divDialog").dialog({ 
      modal: true, 
      show: "fade", 
      hide: "clip", 
      zIndex: 400000 
     });

來源

2013-06-02 AminSaghi

聽起來像你有Z索引問題，增加它的對話框或減少它在菜單中。 –

我做到了。現在對話的z是400000！不起作用...我已經設置了對話框z作爲像這樣的選項'zIndex：400000'我正確嗎？！ – AminSaghi

您需要包含足夠的代碼來重現您的問題，否則我們只能進行猜測。 jsbin.com或jsfiddle.net上的功能演示也會有所幫助。 –

找到了！我將style="z-index:1"添加到頂部<ul>我的菜單的定義和修復的錯誤...

謝謝大家的建議。

來源

2013-06-02 18:55:00 AminSaghi

JQuery UI模式對話框並不包含頁面

回答

相關問題