我正在尝试使用jqueryUI库中的自动完成功能。我可以在正常页面上正常工作,但是当我在放大的弹出窗口中显示的表单中使用相同的功能时,它根本无法工作。
我在.ui-autocomplete jquery-ui.css上添加了z-index:9999
.ui-autocomplete {
position: absolute;
top: 0;
left: 0;
cursor: default;
z-index: 9999;
}
大型弹出框的z索引为1043、1044、1045。
在Chrome浏览器中,我使用了Inspect Element并将对话框的不透明度更改为0.5,这样我就可以查看它是否在后面渲染,但事实并非如此。
有什么想法我可能还会错过吗?
谢谢
最佳答案
如果还有其他人需要答案,则需要在您的网页上添加以下代码,以在使用Magnific Popup的情况下覆盖jQuery-ui默认的CSS。
<style>
.ui-front
{
z-index: 2000;
}
</style>
原因是因为jQuery-ui的
.ui-front
的z-index
为100,而Magnific Popup的z-index则为1000+,因此如果使用默认值,则从技术上将在弹出窗口后面显示。