Question

我看到this post并按其说明行事，但它并没有解决我的问题。我使用CSS3 Menu的免费版本创建了一些<ul><li></li></ul>菜单。当我打开JQuery UI模式对话框时，对话框不会覆盖这些菜单，它们会保持在黑暗和对话框本身之上。我该怎么办？

我的一个菜单的.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
        });

Answer 1

发现它！我将style="z-index:1"添加到菜单的前<ul>个定义中并修复了错误...

谢谢大家的建议。

JQuery UI模式对话框未涵盖页面中的所有元素

1 个答案: