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获取提交的字符串的字节数
Feb 09 Javascript
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
node.js文件上传处理示例
Oct 27 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
Jul 07 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
Mar 22 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 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
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
javascript分页代码(当前页码居中)
2012/09/20 Javascript
AngularJS基础知识
2014/12/21 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
angularjs之$timeout指令详解
2017/06/13 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
简单实现python进度条脚本
2017/12/18 Python
python奇偶行分开存储实现代码
2018/03/19 Python
python and or用法详解
2019/06/26 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
python读取ini配置文件过程示范
2019/12/23 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
开学典礼主持词
2014/03/19 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
励志演讲稿500字
2014/08/21 职场文书
课外小组活动总结
2014/08/27 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python
MySQL8.0的WITH查询详情
2021/08/30 MySQL
python3中apply函数和lambda函数的使用详解
2022/02/28 Python
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫