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操作ACCESS数据库(读增改删)的代码
May 14 Javascript
javascript脚本调试方法小结
Nov 24 Javascript
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
简易js代码实现计算器操作
Apr 15 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
css如何让浮动元素水平居中
Aug 07 Javascript
jquery实现倒计时功能
Dec 28 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
vue中实现高德定位功能
Dec 03 Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 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自动加载的两种实现方法
2010/06/21 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
JavaScript触发器详解
2007/03/10 Javascript
jQuery 开天辟地入门篇一
2009/12/09 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
实例分析编写vue组件方法
2019/02/12 Javascript
python中urllib模块用法实例详解
2014/11/19 Python
Python中实现最小二乘法思路及实现代码
2018/01/04 Python
Python查看微信撤回消息代码
2018/06/07 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
Python面向对象实现方法总结
2020/08/12 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
幼儿园门卫岗位职责
2014/02/14 职场文书
高中军训感言600字
2014/03/11 职场文书
入党综合考察材料
2014/06/02 职场文书
工会工作个人总结
2015/03/03 职场文书
阿甘正传观后感
2015/06/01 职场文书
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫
Python如何用re模块实现简易tokenizer
2022/05/02 Python