最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的一个编辑框提供了自动完成功能,用jQuery UI Autocomplete来实现。
因为我是WEB前端小白,遇到一个问题很久也没解决掉,所以特简单记录一下,供以后查阅。
问题:不使用模态窗的时候,autocomplete可以很好的工作,使用模态窗时弹出的选择菜单会被模态窗遮挡。
解决过程:
首先查到的解决办法是在*autocomplete.css中找到.ui-autocomplete伪类,添加z-index:
100000000000000000000000000000000;
测试后没有任何作用,也用Firebug尝试去调试页面,虽然查看到弹出层的z-index值为1041,而autocomplete生成的ul并没有z-index值,以我的功力还是无从下手。
最后在博客园找到一篇帖子基于Jquery-ui的自动补全,按照贴子里的做法,在cshtml文件最后添加了下面一段CSS代码,终于成功解决。
然而,当我把这代码单独保存到一个CSS(autocomplete-zindex.css)文件,再引入到页面中时,问题又回到之前的状态了。
}