弹出菜单隐藏在对话框后面
Pop up menu is hidden behind dialog box
我有一个包含gridview的对话框,用户可以在其中输入信息。其中一个网格的文本框旁边有一个按钮。当这个按钮被点击时,它会弹出一个带有项目列表的菜单,用户可以选择一个,它会填充文本框。问题是弹出式菜单显示在对话框后面,所以我可以看到所有的。我需要弹出显示在对话框的前面。
对话框代码:
$("#manifestEdit").dialog({
autoOpen: false,
height: 510,
width: 910,
modal: false,
buttons: {
}
close: function () {
}
});
弹出式菜单代码:
<div id="divPickList<%= this.ClientID %>" class="dvdraggable dvAddressList" style="min-width:410px;">
<table id="Table1">
<tr >
<td id="tdSearchHeaderCost" runat="server" class="tdPreviewHeader" >
Part List
<a onclick="HidePickList<%= this.ClientID %>()" title="Close" class="previewClose"></a>
<a href="Stock.aspx" target="_blank" title="Add new Part..." class="btnNewAddress" id="btnNewLookupCost" style="float:right;"></a>
</td>
</tr>
<tr>
<td class="tableSearchHeader" ><input class="SearchBox" type"text" id="txtAddressSearchOption<%= this.ClientID %>" /></td>
</tr>
<tr class="replacerow">
<td>
<img src="images/loading.gif" alt="Loading..." title="Loading..." />
</td>
</tr>
</table>
</div>
当单击文本框旁边的按钮时,运行以下代码以显示弹出窗口:
$("#divPickList<%= this.ClientID %>").fadeIn(300);
$("#divPickList<%= this.ClientID %>").offset({ top: 300, left: 300 });
是否有我需要在这里添加的东西,所以弹出显示在对话框的前面?
我想你是在找z-index
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
你只需要将z-index
设置为高于对话框的值。
<div id="divPickList<%= this.ClientID %>" style="z-index: 99" ...
$(document).ready(function(){
$("#manifestEdit").dialog({
autoOpen: true,
height: 100,
width: 100,
modal: false
});
$("#divPickList").fadeIn(300);
$("#divPickList").offset({
top: 140,
left: 100
});
});
#manifestEdit
{
position: absolute;
border: 5px solid black;
background: blue;
z-index: 1
}
#divPickList
{
position: absolute;
border: 5px solid grey;
background: red;
z-index: 2
}
<script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<div id="manifestEdit">
The Manifest!
</div>
<div id="divPickList" class="dvdraggable dvAddressList" style="min-width:410px;">
<table id="Table1">
<tr>
<td id="tdSearchHeaderCost" runat="server" class="tdPreviewHeader">
Part List
<a onclick="HidePickList()" title="Close" class="previewClose"></a>
<a href="Stock.aspx" target="_blank" title="Add new Part..." class="btnNewAddress" id="btnNewLookupCost" style="float:right;"></a>
</td>
</tr>
<tr>
<td class="tableSearchHeader">
<input class="SearchBox" type "text" id="txtAddressSearchOption" />
</td>
</tr>
<tr class="replacerow">
<td>
<img src="images/loading.gif" alt="Loading..." title="Loading..." />
</td>
</tr>
</table>
</div>
相关文章:
- Bootstrap在页面加载缓慢时会立即显示隐藏的模式对话框
- 是否可以隐藏javascript确认对话框
- Primefaces对话框在隐藏后保持焦点
- 显示隐藏的bootboxjs对话框
- 对话框UI-隐藏效果不会触发完整事件
- jQuery对话框,关闭时在对话框中隐藏一个元素
- 如何在asp.net的代码隐藏文件中显示对话框
- 使用 JavaScript 隐藏和显示对话框
- 如何从钛中的选项对话框单击事件中隐藏Android软键盘
- 在 JQuery 对话框中隐藏和显示 Div 内容
- 显示和隐藏动态 jQuery UI 对话框
- 默认情况下,jQuery对话框是否显示为隐藏
- JS在点击提交时显示隐藏对话框
- 在模式对话框中隐藏服务器端数据
- 如何使用纯javascript显示和隐藏模态对话框
- 隐藏地址对话框
- 在CKEditor的对话框中隐藏文本输入
- 如何隐藏自定义温泉对话框
- (c# - GridView)在代码后面的LinkButton_Click上打开隐藏的FileUpload对话框
- jQueryUI 对话框隐藏关闭 (X) 按钮,如果标题包含右对齐的文本.我该如何解决这个问题