bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法


Posted in Javascript onJuly 09, 2019

bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法

筒子们在使用bootstrap的日期控件(datepicker , 现在官网提供的名称叫 datetimepicker)时可能会遇到如上图的问题这是啥原因造成的呢?

答案很简单时输出的优先级造成的(z-index)

z-index 的值越大优先级越高 就会越显示靠前上图的情况就是dialog的 x-index的值大于datepicker的值

上图找到了对应控件的css样式后修改x-index的值直到datepicker 的控件显示在dialog之前:

bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法

记住这个x-index的值(假设1100)后可以着手解决这个问题了!

解决这个问题有几种方法:

方法一:

找到bootstrap.css 方法

查找dropdown-menu

内容如下:

将其中x-index的值改成1100(根据具体情况确定)保存后重新打开该页面

如果不行就要F12 看看是否优先级被修改。

如果你出现了我上图的样子那么第一种方法不适合你啦!因为上图的element.style{}这个样式是由

js代码生成的,你也可以看到图中2 处的值是被element.style覆盖的。

也不要指望通过 ”!important“ 的写法修改因为datepicker 的窗口是通过js生成的页面本身没有与之对应的标签(不过可以找到该js文件在生成的div后 加上该样式 ,不过这样就不如直接使用第二种方法了)。

方法二:

找到datepicker的js文件,前面说了这样式是自动生成的所以我们找到 bootstrap-datepicker.js(新版名称应该是 bootstrap-datetimepicker.js)

修改生成样式的代码:

bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法

将z-index的值修改成1100(根据实际情况修改)

然后刷新页面看看吧。应该是没问题了,如果还有问题欢迎私信我 我们一起学习下~

总结

以上所述是小编给大家介绍的bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法  ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JS字符串处理实例代码
Aug 05 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
jQuery mobile 移动web(4)
Dec 20 Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
详解JavaScript中的强制类型转换
Apr 15 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
小程序新版订阅消息模板消息
Dec 31 Javascript
JS面试题中深拷贝的实现讲解
May 07 Javascript
bootstrap datepicker的基本使用教程
Jul 09 #Javascript
JavaScript常用内置对象用法分析
Jul 09 #Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 #Javascript
JavaScript中BOM对象原理与用法分析
Jul 09 #Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 #jQuery
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 #Javascript
详解vue 2.6 中 slot 的新用法
Jul 09 #Javascript
You might like
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
lib.utf.js
2007/08/21 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
node中的session的具体使用
2018/09/14 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
基于Python 函数和方法的区别说明
2021/03/24 Python
网络教育自我鉴定
2013/11/01 职场文书
中医药大学毕业生自荐信
2013/11/08 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
2014年党员整改措施
2014/10/24 职场文书
中秋节随笔
2015/08/15 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
Go语言编译原理之变量捕获
2022/08/05 Golang
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers