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;
}

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

相关文章

操作步骤 1、进入elasticsearch的plugin,进入ik。进入config。 2、在config下面建立以.dic为后缀的字典...
lengend data数据中若存在&#39;&#39;,则表示换行,用&#39;&#39;切割。
代码实现 option = { backgroundColor: &amp;#39;#080b30&amp;#39;, tooltip: { trigger: &...
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var data = &#...
前言 最近做了一个调查问卷导出的功能,需求是将维护的题目,答案,导出成word,参考了几种方案之后,选...
对于很多人来说,用字符编码都是熟能生巧,而不清楚为什么是那样的字符编码,所以我在这列了一个表,翻...