Question

我正在尝试在jquery对话框中设置简单的菜单项。但是对于较大的菜单，菜单中的一半仅显示在对话框中，其余部分隐藏在jquery对话框后面。

我尝试将ul的z-index增加到1003（对话框的z-index为1002），但这也无效。

以下示例代码

     <table style="width: 650px; left: 0px;display:none;overflow:auto"   class="srchTop" id="tblMain" >
     <tr>
     <td colspan="3" align="left" style="width: 90%">
               <div style="width: 120px; float: left; vertical-align: middle">
                                <div id="SearchInDiv" style="border-color: #0099d4; width: 120px; height: 100%" >
                                    <ul>
                                        <li><a href="#" ><span id="SpanInHeader">Search In &nbsp; <em>
                                            <img src="images/zonebar-downarrow.png" alt="dropdown" />
                                        </em></span></a>
                                            <ul>
                                                <li><a href="javascript:TriggerFilter(1,'SearchIn','Menu1')">Menu1</a></li>
                                                <li><a href="javascript:TriggerFilter(6,'SearchIn','Menu2')">Menu2</a></li>
                                                <li><a href="javascript:TriggerFilter(5,'SearchIn','Menu2')">Menu2</a></li>
                                                <li><a href="javascript:TriggerFilter(3,'SearchIn','Notes')">Menu4</a></li>
                                                <li><a href="javascript:TriggerFilter(2,'SearchIn','All Fields')">Common Fields</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </div>
            </td>
         </tr>
        </table>

和css

     #SearchInDiv {
background:White;   
min-height: 20px;
float:right;
    text-decoration: none;
    color: #335588;
}
#SearchInDiv ul {
    display: block;
    }
    #SearchInDiv ul li {
        position: relative;
        float: right;
        padding: 1px 5px 0 5px;
        z-index: 600;
        }

        #SearchInDiv ul li a 
        {
            display: block;
            float: right;
            position: relative;
            color: #383838;             
            font-size: 11px;
            text-decoration: none;
            outline: none;
            width:115px;
            z-index: 600;
        }
#SearchInDiv ul li ul 
        {
            float: left;
            display: none;
            position: absolute;
            top: 20px;
            left: 1px;
            width: 120px;
            border: 1px solid #ccc;
            background: white;
            text-decoration: none;
            outline: none;
            z-index: 1003;
            }

我无法理解这个问题，有人可以帮我解决这个问题吗

修改

这里是对话框设置

 $("#tblMain").dialog({
        autoOpen: false,
        width: 660,
        resizable:false,
        modal:true,
        zIndex: 100
    });

和启动菜单的代码

$("#SpanInHeader").click(function() {
                var hidden = $(this).parents("li").children("ul").is(":hidden");

                $("#SearchInDiv>ul>li>ul").hide()        

                if (hidden) {
                    $(this)
                        .parents("li").children("ul").toggle();
                    } 
    });

Answer 1

您是否尝试设置float属性或z-index: 9999？

Answer 2

您可以使用custom z-index初始化jQuery .dialog()。你尝试过这样的事吗？

$('.your_selector').dialog({ 
  zIndex: 700
});

问题：菜单UL总是落后于jquery对话框

2 个答案: