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 相关文章推荐
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
jQuery插件 tabBox实现代码
Feb 09 Javascript
JavaScript 注册事件代码
Jan 27 Javascript
小试JQuery的AutoComplete插件
May 04 Javascript
js 遍历对象的属性的代码
Dec 29 Javascript
js实现单一html页面两套css切换代码
Apr 11 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
js实现踩五彩块游戏
Feb 08 Javascript
jQuery实现可以扩展的日历
Dec 01 jQuery
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
PHP的FTP学习(二)
2006/10/09 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
JQuery切换显示的效果实例代码
2013/02/27 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
JsRender实用入门教程
2014/10/31 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
JS & JQuery 动态添加 select option
2016/06/08 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
js实现自定义路由
2017/02/04 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
vue实现计算器功能
2020/02/22 Javascript
Python学习笔记之常用函数及说明
2014/05/23 Python
python安装与使用redis的方法
2016/04/19 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
PyCharm 在Windows的有用快捷键详解
2020/04/07 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
北大青鸟学生求职信
2013/09/24 职场文书
公司市场部岗位职责
2013/12/02 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
2015年领班工作总结
2015/04/29 职场文书