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 Element学习笔记(篇一)
Oct 26 Javascript
Javascript 自定义类型方法小结
Mar 02 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
HTML5 js实现拖拉上传文件功能
Nov 20 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
微信用户访问小程序的登录过程详解
Sep 20 Javascript
JS co 函数库的含义和用法实例总结
Apr 08 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
数据库的日期格式转换
2006/10/09 PHP
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
详解Python的单元测试
2015/04/28 Python
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
Python制作词云的方法
2018/01/03 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
公司企业表扬信
2014/01/11 职场文书
迟到检讨书大全
2014/01/25 职场文书
淘宝中秋节活动方案
2014/01/31 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
六年级小学生评语
2014/12/26 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
Python机器学习之底层实现KNN
2021/06/20 Python
JavaScript 数组去重详解
2021/09/15 Javascript
关于mysql中时间日期类型和字符串类型的选择
2021/11/27 MySQL
python运行脚本文件的三种方法实例
2022/06/25 Python