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 相关文章推荐
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
推荐10个2014年最佳的jQuery视频插件
Nov 12 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
Node.js学习入门
Jan 03 Javascript
js实现3D图片展示效果
Mar 09 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 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
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
php输入数据统一类实例
2015/02/23 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
jquery下json数组的操作实现代码
2010/08/09 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
深入浅析javascript函数中with
2018/10/28 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
python同时替换多个字符串方法示例
2019/09/17 Python
Python PyPDF2模块安装使用解析
2020/01/19 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
餐饮业会计岗位职责
2013/12/19 职场文书
婚前协议书怎么写
2014/04/15 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
2014年食堂工作总结
2014/11/20 职场文书
费城故事观后感
2015/06/10 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android
windows系统安装配置nginx环境
2022/06/28 Servers
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS