bootstrap日期控件在火狐下的模态框中选择时间下拉菜单无效的解决办法
今天收到程序组提交的一个兼容BUG,在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果(不能点击),而在谷歌中却是好的,
排错思路:1,在当前页面主层放置一个时间控件,测试通过
2,在ajax加载页放置一个时间控件,测试通过
3,在模态框最外层放置一个时间控件,不通过
主要原因是模态框与时间下拉菜单层级关系造成(z-index),因时间控件是收bootstrap的时间控件.js文件生成,所以导致在页面与css样式表中修改无效,网上有直接修改bootstrap的时间控件.js文件,然而bootstrap版本太多,不建议修改这个文件
解决办法:去掉最模态框最外层的tabindex="-1" role="dialog"属性,以及form层中的bootstrap-validator-form。
去掉前
<div class="modal fade bs-example-modal-lg winningUser" id="editor" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" style="width:60%;" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" id="topClose"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">请选择本轮次使用的奖品</h4> </div>
<div style="min-height:400px;padding:0 20px 20px 20px;">
<form id="awardForm" method="post" action="${base }/activity/ajax_add_award_settings.json" class="form-horizontal bootstrap-validator-form" >
去掉后
<div class="modal fade bs-example-modal-lg" id="editor">
<div class="modal-dialog modal-lg" style="width:60%;" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" id="topClose"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">请选择本轮次使用的奖品</h4> </div>
<div style="min-height:400px;padding:0 20px 20px 20px;">
<form id="awardForm" method="post" action="${base }/activity/ajax_add_award_settings.json" class="form-horizontal" >
问题解决了!开心~
bootstrap日期控件在火狐下的模态框中选择时间下拉菜单无效的解决办法的更多相关文章
- bootstrap日期控件(双日期、清空等问题解决)
bootstrap以它优美的外观和丰富的组件,使它成为目前最流行的前端框架.在项目开发中,我们使用它的日期控件确实遇到了一些问题: 1.日期控件后面两个图标点击触发失效 2.双日期关联问题 3.双日期 ...
- [转]通过AngularJS directive对bootstrap日期控件的的简单包装
本文转自:http://www.cnblogs.com/Benoly/p/4109460.html 最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的 ...
- [整理]通过AngularJS directive对bootstrap日期控件的的简单包装
最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的例子,可以使用AngularJS的directive做简单的处理,这样在html里直接使用申明的的形 ...
- bootstrap 日期控件常用选项
使用bootstrap作为UI基础之后,为了尽可能的保持系统风格的一致性,通常我们不太会考虑再引入My97DatePicker作为日期控件. 作为潜在实现的选择之一,http://www.bootcs ...
- Tag It 一款 Jquery控件,当你在文本框中输入逗号时,自动帮你分隔开相关内容
Demo地址:http://webspirited.com/tagit/ 使用方法: 除了JQuery脚本外,下面的脚本也是必须的,这些脚本你都可以去GitHub下载:https://github.c ...
- 在Linux下安装PHP过程中,编译时出现错误的解决办法
在Linux下安装PHP过程中,编译时出现configure: error: libjpeg.(a|so) not found 错误的解决办法 configure: error: libjpeg.(a ...
- bootstrap 日期控件 bootstrap-datepicker
http://www.bootcss.com/p/bootstrap-datetimepicker/
- bootstrap下modal模态框中webuploader控件按钮异常(无法点击)问题解决办法【转】
http://bbs.csdn.net/topics/391917552 具体如下: $(function () { var _$modal = $('#MyModal'); ...
- bootstrap日期控件
http://www.bootcss.com/p/bootstrap-datetimepicker/ <link href="js/b/css/bootstrap-datetimepi ...
随机推荐
- Unity3D 学习笔记
不是什么技术文章,纯粹是我个人学习是遇到一些觉得需要注意的要点,当成笔记. 1.关于调试,在Android下无法断点,Debug也无法查看,查看日志方法可以启动adb的log功能,或者自己写个GUI控 ...
- solr多条件查询(一)
每个项目的数据结构可能不同,查询的格式有可能不同,本项目所有的字段为动态的,所以整理了一下, 1.查询所有字段中包含”测试“但是所有的TM不包含”江苏大学“ q:X_1457955996315KEY: ...
- nginx反向代理、优化
本优化适合apache,nginx,squid多种等web应用,特殊的业务也可能需要略作调.生产环境linux的内核优化 net.ipv4.tcp_fin_timeout = net.ipv4.tcp ...
- LAMP平台部署及应用
环境:http://www.cnblogs.com/zzzhfo/p/5925786.html http://www.cnblogs.com/zzzhfo/p/5934630.html 1.LAMP ...
- [KOJ6997]旅行商问题二
[COJ6997]旅行商问题二 试题描述 Bob是一名旅行商,Bob同时也是一个哲学家,他深知到了一个地方就要掏出钱包把所有景点都玩到.一个城市有N个景点,其中N-1条无向道路链接成一个连通图.Bob ...
- 给UIView添加手势
对于不能addTarget的UI对象,添加手势为他们带来了“福音”,以为UIView添加手势为例,揭开手势的面目. 1,创建一个view先, UIView * jrView=[[UIViewalloc ...
- 剑指Offer 顺时针打印矩阵
题目描述 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数字1,2, ...
- vb.net dll创建
创建vb.net的动态链接库 如果你想用用VC来编写vb.net的dll,我想本文不适合. 本文只说vb.net的dll. 何为vb.net的dll?实际上就是一个类库. 很多个类封装成一个库了,这就 ...
- linux下一个有意思的问题(文件名以短划线或空格开头)
linux下一个有意思的问题(文件名以短划线开头) 这本是无意中的一个发现. 在linux下,文件名中含有 - 是没有问题,但是如果文件名是以-作为第一个字符的,那么就比较麻烦了. 问题演示 看这里, ...
- swing复制文本框内容
Clipboard clipboard = Toolkit.getDefaultToolkit().getSystemClipboard(); //得到系统剪贴板 String text = jTex ...