Question

我有一个包含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 });

我需要在这里添加一些内容，以便弹出窗口显示在对话框前面吗？

Answer 1

我认为您正在寻找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>

弹出菜单隐藏在对话框

1 个答案: