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文件加载管理简单实现方法
Jul 25 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
Vue.js表单控件实践
Oct 27 Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 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
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
Python连接phoenix的方法示例
2017/09/29 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)
2019/08/28 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
英文简历中的自我评价用语
2013/12/09 职场文书
八项规定整改方案
2014/02/21 职场文书
农民工工资承诺书范文
2014/03/31 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
学年个人总结范文
2015/03/05 职场文书
招商银行收入证明
2015/06/17 职场文书
清洁工工作总结
2015/08/11 职场文书
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
python中的getter与setter你了解吗
2022/03/24 Python
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js