文档章节

jQuery UI中dialog 遮盖 autocomplete的问题解决

bobway
 bobway
发布于 2017/07/25 22:03
字数 448
阅读 27
收藏 0

问题:autocomplete提示框被遮挡

最近在使用jQuery 插件fullCalendar做一个会议预约功能,新建预约时用到了jquery UI的两个插件dialog和autocomplete,结果遇到了下图所示问题:autocomplete的返回item被dialog遮挡啦。

由于对css不太熟悉,摸索了良久未能解决,到处搜寻未找到方案,最后请教了前端大牛,轻松搞定,不得不服,其间又学到了一些新技能,故稍作总结,希望能帮到和我一样遇到此问题的前端小白们。

 

首先介绍一个CSS属性:

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

也就是z-index属性值越大的元素会显示越上面

详细了解z-index属性,请参考W3School:

http://www.w3school.com.cn/cssref/pr_pos_z-index.asp

网友博客:http://www.uzzf.com/news/8287.html

 

解决方法:设置z-index属性

在autocomplete item上点击右键,点击弹出菜单中“审查元素”,出现如下视图:

 

可以看到 autocomplete 元素的z-index 是100

dialog的z-index值也是100,因为他们都引用了 ui-front类,而由于相同级别的z-index 显示顺序与文档流顺序有关,故下面的dialog元素 覆盖了上面的autocomplete 元素

找到了问题原因,解决方法自然就简单了,只需把autocomplete元素的z-index值设置大一些就行了。通过查看元素属性,我们发现autocomplete元素还具有ui-autocomplete这个类属性,于是我单独为这个类添加了z-index属性,如下:

<style>

.ui-autocomplete{

       z-index: 11111;

}

</style>

如此,autocomplete元素自动使用了这个z-index更大的值。效果如下:

本文转载自:http://blog.csdn.net/rchm8519/article/details/42924927

上一篇: centos安装tomcat
bobway
粉丝 4
博文 116
码字总数 25192
作品 0
成都
私信 提问
jQuery UI 1.8.5 发布-下载

这是 jQuery UI 1.8 的第五个维护版本,包含核心模块的bug修复,以及包括 Autocomplete, Button, Datepicker Dialog, Tabs widgets 的定位问题修复. 更详细的改进内容请看 changelog. 下载地...

红薯
2010/09/18
3K
1
jQuery UI 1.8.14 发布

jQuery UI 1.8 的第 14 个维护版本,修复了 Autocomplete, Button, Datepicker, Dialog, Draggable, Droppable, Resizable Sortable and Effects 的一些bug,完整记录请看 changelog. 下载地......

红薯
2011/06/29
2.6K
7
jQuery UI 1.9.2 发布

这是 jQuery UI 1.9 的第二个维护版本,修复了包括: Accordion, Autocomplete, Button, Datepicker, Dialog, Menu, Tabs, Tooltip and Widget Factory 等多个组件的 bug,完整列表请看 chan...

oschina
2012/11/24
5.4K
13
jQuery UI 1.10.4 发布

jQuery UI 1.10.4 发布了,修复了 Widget Factory, Position, Droppable, Resizable, Accordion, Autocomplete, Button, Datepicker, Dialog, Menu, Slider, Spinner, Tabs, and the CSS Fr......

oschina
2014/01/18
5.1K
2
jQuery UI 1.8.18 发布

jQuery UI 1.8 的第 18 个维护版本发布了,该版本修复了 Accordion, Autocomplete, Button, Datepicker, Dialog, Draggable, Position, Resizable, Slider, Sortable, 和 Tabs 的一些 bug (......

红薯
2012/02/24
3.4K
6

没有更多内容

加载失败,请刷新页面

加载更多

gradle grovvy中的闭包

1. 无参数的闭包 //这b1就是一个闭包def b1={ println "hello b1"}//定义方法,包含闭包类型的参数def method1(Closure closure){closure()}//执行method1method1(b1) 执行结果 ...

edison_kwok
14分钟前
1
0
基于Spring Boot + Dubbo的全链路日志追踪(一)

一、 概要 当前公司后端整体架构为:Spring Boot + Dubbo。由于早期项目进度等原因,对日志这块没有统一的规范,基本上是每个项目自己管自己的日志。这也对后面的问题排查带来了很大的困难,...

明天以后
今天
6
0
安装fastdfs文件服务器步骤

1、安装libfastcommon wget https://github.com/happyfish100/libfastcommon/archive/master.zip 解压后安装 cd fastcommon-master ./make.sh ./make.sh install 2、安装 FastDFS,从sourcef......

lsjlgo
今天
3
0
MySQL 5.7 免安装版配置

下载地址:https://dev.mysql.com/downloads/mysql/ 安装步骤 1.下载zip解压到目录下 2.配置环境变量 新建系统变量:MYSQL_HOME,值:D:\DevelopmentTool\Mysql-5.7.26-winx64 修改path变量:...

华山猛男
今天
7
0
java map的遍历

//从大的角度可以分为两类Set<String> set=map.keySet();这里面还可以分为3类, 从set的角度来分 //Set<Map.Entry<String, String>> entery=map.entrySet(); public class Test { public sta......

南桥北木
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部