jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法


Posted in Javascript onSeptember 23, 2016

最近在一个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代码,终于成功解决。

<style type="text/css">
.ui-autocomplete{
display:block;
z-index:99999;
}
</style>

然而,当我把这代码单独保存到一个CSS(autocomplete-zindex.css)文件,再引入到页面中时,问题又回到之前的状态了。

@section Scripts{
<link href="~/Content/jquery-ui-autocomplete.css" rel="stylesheet" />
<link href="~/Content/autocomplete-zindex.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui-autocomplete.js" type="text/javascript"></script>
<link href="~/Content/jquery-ui-datepicker.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui-datepicker.js" type="text/javascript"></script>
<script src="~/Scripts/datepicker-zh-HK.js" type="text/javascript"></script>
<script src="~/Scripts/datepicker-setting.js" type="text/javascript"></script>
}

上面一段代码的本意是将对autocomplete和datepicker的引用分开,相对独立便于维护。

经过反复尝试后发现,原来是因为jquery-ui-datepicker.css放在后面导致,把顺序调换一下就可以了

<link href="~/Content/jquery-ui-autocomplete.css" rel="stylesheet" />
<link href="~/Content/jquery-ui-datepicker.css" rel="stylesheet" />
<link href="~/Content/autocomplete-zindex.css" rel="stylesheet" />

走到这,也就明白了,其实直接改.ui-autocomplete伪类代码,加上z-index:99999;其实也是正确的,不过就是要注意放在datepicker.css文件之后罢了。

方案:

1.简单:直接修改jquery-ui-autocomplete.css中的.ui-autocomplete伪类,注意将该css文件放在所有css文件的最后

2.粗暴:直接在cshtml页面代码最下面添加代码:<style type="text/css">.ui-autocomplete{z-index:99999;}</style>

3.伪雅:将第二步代码写在单独的css文件,然后保持对该css文件的引用放在所有css文件之后

以上所述是小编给大家介绍的jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
微信小程序日期选择器实例代码
Jul 18 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 #Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 #Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 #Javascript
AngularJS监听路由的变化示例代码
Sep 23 #Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 #Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 #Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 #Javascript
You might like
介绍php设计模式中的工厂模式
2008/06/12 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
详谈js模块化规范
2017/07/07 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
nodejs使用redis作为缓存介质实现的封装缓存类示例
2018/02/07 NodeJs
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
Python functools模块学习总结
2015/05/09 Python
python学生管理系统开发
2019/01/30 Python
python实现统计文本中单词出现的频率详解
2019/05/20 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
意大利综合购物网站:Giordano Shop
2016/10/21 全球购物
2014年会演讲稿范文
2014/01/06 职场文书
高二地理教学反思
2014/01/24 职场文书
电子商务助理求职自荐信
2014/04/10 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
信仰纪录片观后感
2015/06/08 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python