筒子们在使用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(根据实际情况修改)

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

  

bootstrop 日期控件 datepicker被弹出框dialog覆盖的解决办法的更多相关文章

  1. phpcmsV9中表单向导在js调用里日期控件在IE下报Calendar未定义的解决办法

    最近在phpcmsV9里用表单向导弄个的提交表单,但用了日期和时间类型时,用   <script language='javascript' src='{APP_PATH}index.php?m ...

  2. Android 全局弹出版本更新 Dialog 思考和解决办法

    Android 针对版本更新,需要做全局的弹出(需求:版本更新只需要在 App 内全局弹出就可以),思路是使用 AlertDialog ,然后设置 setType 为 TYPE_ALERT_WINDO ...

  3. jQuery UI 日期控件--datepicker

    在web开发中,日期的输入经常会遇到.我们会用的解决方法有: 1.自己写css和js,对日期进行控制:----有点浪费精力和时间: 2.用easyui插件中的日期插件来实现: 3.用juqery-ui ...

  4. 第32讲 UI组件之 时间日期控件DatePicker和TimePicker

    第32讲 UI组件之 时间日期控件DatePicker和TimePicker 在Android中,时间日期控件相对来说还是比较丰富的.其中, DatePicker用来实现日期输入设置,    Time ...

  5. mvc4中jquery-ui日期控件datepicker的应用

    mvc4中jquery-ui日期控件datepicker的应用 本文适合mvc中日期选择需要的同学: 假设读者已经具备了mvc4和javascript中的相关知识 一. 开始项目之前把项目中目录:/C ...

  6. 日期控件 DatePicker 在ie8不能用

    过个年,日期控件DatePicker在ie8下突然不能用了,程序也没升级,很是奇怪. 把ie8的“禁用脚本调试”去掉,再次运行,发现提示有脚本错误. 想着可能是兼容性问题,于是把兼容性视图打开运行,还 ...

  7. 搜狗输入法弹出搜狐新闻的解决办法(sohunews.exe)

    狗输入法弹出搜狐新闻的解决办法(sohunews.exe) 1.找到搜狗输入法的安装目录(一般是C:\program files\sougou input\版本号\)2.右键点击sohunews.ex ...

  8. 日期控件datepicker的使用

    引入JS: <script type="text/javascript" src="static/my/js/bootstrap-datepicker.min.js ...

  9. 如何去除My97 DatePicker控件上右键弹出官网的链接 - 如何debug混淆过的代码

    概述 http://my97.net/是一个web浏览器的日期选择控件,非常好用,做得非常棒,各种API等事件等都很方便,但是使用了4.8beta3之后,在控件上面右击会出现官网链接 ,这个是PM以及 ...

随机推荐

  1. c#判断IP是否可以Ping通

    Ping pingSender = new Ping(); PingReply reply = pingSender.Send("127.0.0.1",120);//第一个参数为i ...

  2. 【复位】FGPA的复位 [部分转]

    关于FGPA的复位 当初开始学FPGA的时候,总是疑惑:FPGA不是没有复位管教么,但总在always看到有复位信号.这个复位信号(我们暂且称为rst_n)从哪里来? 实际上是可以从两个方面获得的,这 ...

  3. mysql小问题

    报错信息如下: 主要是因为用root用户登录查询其他用户的表,结果这个用户不存在了,所以导致没有权限.临时解决办法,给root赋所有权限: grant all privileges on *.* to ...

  4. php 判断图片类型

    脚本之家 <?php $imgurl = "http://www.jb51.net/images/logo.gif"; //方法1 echo $ext = strrchr($ ...

  5. 大规模web服务开发技术

    大规模web服务开发技术 总评        这本书是日本一个叫hatena的大型网站的CTO写的,通过hatena网站从小到大的演进来反应一个web系统从小到大过程中的各种系统和技术架构变迁,比较接 ...

  6. java虚拟机学习-慢慢琢磨JVM(2)

    1 JVM简介 JVM是我们Javaer的最基本功底了,刚开始学Java的时候,一般都是从“Hello World”开始的,然后会写个复杂点class,然后再找一些开源框架,比如Spring,Hibe ...

  7. Service 中添加同步块防止并发 重复

    Service 中添加同步块防止并发 重复. synchronized(this){}

  8. angular指令监听ng-repeat渲染完成后执行自定义事件方法

    今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己创建自定义指令. 在ng-repeat模板实例内部会暴露 ...

  9. shell 通过shift获得某位后的入参

    有时shell的入参个数不定,想要获得第2位后的参数,作为新的入参调用其他脚本   通常这时候想到的方法是用遍历,例如下面的方法: for (( i=2;i<=$#;i++)) do       ...

  10. 测试开发之Django——No4.Django中前端框架的配置与添加

    我们在开发一个web项目的时候,虽然我们不是专业开发,但是我们也想要做出来一个美美的前端页面. 这种时候,百度上铺天盖地的前端框架就是我们的最好选择了. 当然,在网上直接下载的框架,我们是不能直接用的 ...