解决jquery-ui-autocomplete选择列表被Bootstrap模态窗遮挡的问题
最近在一个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模态窗遮挡的问题的更多相关文章
- jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
转:http://www.cnblogs.com/wiseant/p/4553837.html 最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的 ...
- jQuery ui autocomplete下拉列表样式失效解决,三种获取数据源方式,
jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...
- jquery ui autocomplete 实现点击文本框,出现所有查询信息效果,与bootstrap结合使用修改样式
直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...
- jQuery UI Autocomplete是jQuery UI的自动完成组件
支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: ? 1 ["cnblogs" ...
- Jquery ui autocomplete简单api
重要说明:与配置选项类似,Autocomplete插件的方法也不是直接调用,而且通过autocomplete()方法进行间接调用.例如: $("#title").autocompl ...
- jQuery UI Autocomplete是jQuery UI的自动完成组件(share)
官网:http://jqueryui.com/autocomplete/ 以下分享自:http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/25 ...
- jQuery UI AutoComplete的使用
现场提出优化单,Table Mapping里关于获取数据源下所有表名的地方由于表数量过多选择不便,需添加搜索功能.原本的实现是一个Dialog ,现打算将其改为AutoComplete. 框架使用的是 ...
- jquery UI autocomplete当输入框焦点聚焦时自动弹出跟随下拉框
$("#search").autocomplete({ minLength: 0, source: function(request,response){ // request对象 ...
- Node.js配合jQuery UI autocomplete的应用
Node.js擅长的领域为: 不需要很多运算 吞吐量要求高 进消息轻并且要求快 出消息轻并且要求快 网上的例子都是socket.io的,我一直在想到底能用在什么地方?根据node.js的优点(擅长领域 ...
随机推荐
- 4、Python:strip(),split()
1.strip()函数 strip()是删除'()'里面的字符,当()为空时,默认删除空白符(包括'\n','\r','\t','') (1)s.strip(rm) 删除s字符串中开头. ...
- 第六百零六天 how can I 坚持(应该是六百零六天吧)
找了个考研的借口,也是挺逗的,终于结束了,而且考的很渣. 最近发生了很多事,很快就要离开泛华了,放弃安逸,开始改变吧,其实感觉自己内心挺怂的,很怕改变,哎,这不像是有梦想,能成事的人应该有的. 还是想 ...
- BitLocker 加密工具挂起和恢复命令行(windows7)
如果你的硬盘使用BitLocker加密了,但是有时候需要高效率的硬盘做某些事情,可以暂时挂起加密,命令行如下方便做个bat. 挂起: manage-bde -protectors -disable C ...
- Nodejs学习(四)- express目录的分析
好久不来了,最近挺忙,就写一写下目录的情况吧. 我就说主要的目录,也就是我们经常用到的 public 用于存放一些js,css. routes 路由目录,如果你学过MVC应该不默生. views ...
- 表示即将废弃一个方法,或不赞成使用的一个方法或属性或其它,关键词 deprecated
- python操作mysql数据库
连接数据库 输入值 存入数据库 关闭 import string import mysql.connector conn=mysql.connector.connect(user='root',pas ...
- Android客户端稳定性测试——Monkey
修改时间 修改内容 修改人 2016.6.20 创建 刘永志 2016.6.29 完成 刘永志 Monkey简介: Android SDK自带的命令行测试工具,向设备发送伪随机事件流,对应用程序进行进 ...
- Patching Array
引用原文:http://blog.csdn.net/murmured/article/details/50596403 但感觉原作者的解释中存在一些错误,这里加了一些自己的理解 Given a sor ...
- 学习C:程序
#include <stdio.h> main(){ /*将输入复制到输出,并将其中连续的多个空格用一个空格代替*/ int c,nb; nb = 0; while((c = getcha ...
- MongoDB释放磁盘空间
1. 先删除旧的文档db.remove({}): 2. 从副本集中移除待清理的成员: (1) 登录副本集中的 Primary 服务器(/opt/mongo1/bin/mongo --port 2701 ...