Проблема: Меню UL всегда стоит за диалогом jquery - PullRequest
Новая
       5

Проблема: Меню UL всегда стоит за диалогом jquery

1 голос
/ 21 января 2011

Я пытаюсь настроить простой пункт меню в диалоге jquery.Но для больших меню половина меню отображается только в диалоговом окне, остальные скрыты за диалоговым окном jquery.

Я попытался увеличить z-индекс ul до 1003 (z-индекс диалога 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();
                    } 
    });

Ответы [ 2 ]

0 голосов
/ 21 января 2011

Вы можете инициализировать jQuery .dialog() с помощью пользовательского z-индекса .Вы пробовали что-то подобное? 

$('.your_selector').dialog({ 
  zIndex: 700
});
0 голосов
/ 21 января 2011

Вы пытались установить свойство float или z-index: 9999?

...