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

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

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

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

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

记住这个x-index的值（假设1100）后可以着手解决这个问题了！

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

方法一：

　　找到bootstrap.css 方法

　　查找 dropdown-menu

　　内容如下：

.dropdown-menu {position: absolute;top: 100%;left: 0;z-index: 1000;display: none;float: left;min-width: 160px;padding: 5px 0;margin: 2px 0 0;font-size: 14px;text-align: left;list-style: none;background-color: #fff;-webkit-background-clip: padding-box;background-clip: padding-box;border: 1px solid #ccc;border: 1px solid rgba(0, 0, 0, .15);border-radius: 4px;-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

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

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

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

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

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

方法二：

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

　　修改生成样式的代码：

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

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

转载于:https://www.cnblogs.com/wobeinianqing/p/6258153.html

bootstrop 日期控件 datepicker被弹出框dialog覆盖的解决办法相关推荐

ASP.NET Menu控件子菜单弹出导致页面出现滚动条问题
ASP.NET Menu控件子菜单弹出的时候导致页面CSS属性的Min-Height产生变化,结果是原来全屏的画面,多出了纵滚动条.可以通过如下方法解决: 将ASP.NET控件放置到Table的单元格 ...
Android仿IOS封装通用的弹出框Dialog和底部弹出列表选择框仿美团顶部条件筛选框附自定义ViewGroup
弹出框背景提示与询问弹出框实现使用列表选择框实现使用顶部条件筛选框实现自定义ViewGroup 使用总结背景鉴于Android提供的默认弹出框很一般,IOS的弹出框样式还不错 ...
电脑无故弹出yyy102.html网页的解决办法(没办法，今天中招了)
电脑无故弹出yyy102.html网页的解决办法最近不少网民反映电脑隔段时间就会自动弹出某些网站,比如:(千万不要点!!!) http://www.ecommerc-e.com/normal/yyy ...
电脑经常弹出“不支持的硬件”解决办法
电脑经常弹出"不支持的硬件"解决办法. 通过微软官方查证,这是由于以上处理器需要最新的Windows10系统才会这样子的,而大多出现该提示的都安装了Win7或是Win8.1系统. ...
IIS Windows 集成身份验证弹出输入用户名密码的解决办法
IIS Windows 集成身份验证弹出输入用户名密码的解决办法 2013-06-18 10:50:08 标签:IIS Windo 集成身份验证 IE 弹窗用户名密码作者:夏明亮 Technor ...
Swing 菜单JMenu,JMenuBar,JMenuItem、工具栏JToolBar、日期控件DatePicker和JXDatePicker、皮肤
GUI的菜单分为菜单栏,菜单和菜单项菜单栏和菜单菜单栏JMenuBar和菜单JMeun package gui;import javax.swing.JFrame; import javax.s ...
自定义 cube-ui 弹出框dialog支持多个且多种类型的input框
start 最近遇到一个需求,给一个移动端项目加一点小功能. 移动端 UI 组件库使用的是 cube-ui. 但是基础的 cube-ui 不太满足我的需求- 重点是记录一下我的思路,其次才是实现的代码 ...
如何去除My97 DatePicker控件上右键弹出官网的链接 - 如何debug混淆过的代码
概述 http://my97.net/是一个web浏览器的日期选择控件,非常好用,做得非常棒,各种API等事件等都很方便,但是使用了4.8beta3之后,在控件上面右击会出现官网链接 ,这个是PM以及 ...
Android中的日期控件DatePicker和DatePickerDialog
今天早上我写一个程序,需要用到在一个对话框中去显示一个日期匹配器. 当时,我就想,这个还不简单,不就是写一个DatePicker的布局文件,然后再把它部署到AlertDialog中不就好了吗? 当我真 ...

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

bootstrop 日期控件 datepicker被弹出框dialog覆盖的解决办法相关推荐

最新文章

热门文章