html – AJAX Control Toolkit自动完成出现在模态弹出窗口后面

我在 AJAX Control Toolkit中遇到了autocompleteextender的问题,我似乎无法深入到底.该控件位于一个asp：Panel中,该工具包链接到ModalPopupExtender.在IE9,FF和Opera的最新一代中,一切都很美妙,但Safari和Chrome中的故障(假设它与WebKit相关).

故障是自动完成的下拉落后于模式弹出窗口,而不是在它前面(由于隐私原因,名称模糊)：

查看Firebug中的内容,这是在无序列表中呈现的下拉列表：

<ul id="Employeeautocompleteextender_completionListElem" class="autoCompleteList" style="width: 281px; visibility: visible; position: absolute; left: 0px; top: 22px; z-index: 1000; ">

autoCompleteList类如下所示：

.autoCompleteList
{
  list-style: none outside none;
  border: 1px solid buttonshadow;
  cursor: default;
  padding: 0px;
  margin: 0px;
}

模态弹出窗口的结果div如下所示：

<div id="MainContent_AddPeoplePanel" class="modalPopup" style="z-index: 100001; position: absolute; left: 719px; top: 352.5px; opacity: 1; ">

使用以下modalPopup CSS类：

.modalPopup
{
  background-color: White;
  padding: 10px;
  width: 462px;
}

我的假设是列表中较低的z-index导致它落后于div,但是再次,它在非WebKit浏览器中表现得很好. z-index也是内联样式,所以它们显然是直接来自控件.我在这里错过了什么吗？有什么建议？ (除了放弃WebForms和AJAX并使用jQuery)

解决方法

看到你怀疑这是导致问题的z-index,如果你尝试使用！important来覆盖Ajax Control Toolkit吐出的内联样式会发生什么？

.autoCompleteList {
  list-style: none outside none;
  border: 1px solid buttonshadow;
  cursor: default;
  padding: 0px;
  margin: 0px;
  z-index:2000 !important;
}

.modalPopup {
  background-color: White;
  padding: 10px;
  width: 462px;
  z-index:1000 !important;
}

我知道这有点像黑客,但如果你还没有尝试过它可能值得一试？

原文地址：https://www.jb51.cc/html/223769.html