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 相关文章推荐
JS实现打开本地文件或文件夹
Mar 09 Javascript
jQuery源码分析之Event事件分析
Jun 07 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
用jquery和json从后台获得数据集的代码
Nov 07 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
requireJS使用指南
Apr 27 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
Aug 11 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 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判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
PHP编程基本语法快速入门手册
2016/01/07 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
javascript 对象比较实现代码
2009/04/27 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
Django用户认证系统 User对象解析
2019/08/02 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
NumPy统计函数的实现方法
2020/01/21 Python
Python底层封装实现方法详解
2020/01/22 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
DTD的含义以及作用
2014/01/26 面试题
趣味比赛活动方案
2014/02/15 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
会计岗位职责范本
2015/04/02 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
Python如何导出导入所有依赖包详解
2021/06/08 Python