jqueryダイアログ内に簡単なメニュー項目を設定しようとしています。しかし、大きなメニューの場合、メニューの半分はダイアログにのみ表示され、残りはjqueryダイアログの後ろに隠されます。問題:メニューULは常にjqueryダイアログの後ろにあります。
ulのz-indexを1003に増やしてみました(ダイアログのz-indexは1002ですが、それも機能しません)。
誰かが私はこの1つのEDIT
を解決することができます私は、問題を理解できなかったサンプルコード <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 <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();
}
});
のz-indexプロパティ.. – RameshVel