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 ...
随机推荐
- linux系统安装yum环境
http://blog.sina.com.cn/s/blog_63d8dad80101cn2s.html 1.卸载rhel的默认安装的yum包 查看yum包 rpm -qa|grep yum 卸载之 ...
- POJ 2155 Matrix
二维树状数组.... Matrix Time Limit: 3000MS Memory Limit: 65536K Total Submissio ...
- OC第八节——目录操作和文件管理
1.需要理解的知识 通常程序在运行中或者程序结束之后,需要保存一些信息,而且需要持久化存储信息,比如登陆信息.视频播放记录.收藏记录等等,那么我们可以采用以下几种方式对数据进行持 ...
- 创业15条经验总结:温饱之后,创业公司CEO如何树“三观”?
都说创业改变命运,事实上不是,创业,时时刻刻,可能连“命”都保不住!创业公司最重要的只有“活下去”.满足了这个.才有资格谈其他.公司连饭都开不了,还谈什么其他?创业公司如果连生存问题都解决不了,高位的 ...
- mongoDB- - 2 增、删、改 操作
1.创建数据库 语法:use database 说明:如果database不存在,就会创建database:如果存在就会切换到database 2.查看所有数据库 语法:show dbs; 说明:如果 ...
- iOS项目目录结构
一. 目前最为流行的目录结构是: <先根据模块后根据功能> 的文件目录结构 优点: 模块分明, 并且开发和维护时方便查阅各个功能 缺点: 可能会出现模块内随意建立文件夹, 导致局部逻辑紊乱 ...
- objc/runtime
"T@\"MyInnerObject\",&,N,V_myInnerObject" MyInnerObject "Td,N,V_cgfloat ...
- leetcode 74. Search a 2D Matrix
Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...
- Java BigDecimal详解
借用<Effactive Java>这本书中的话,float和double类型的主要设计目标是为了科学计算和工程计算.他们执行二进制浮点运算,这是为了在广域数值范围上提供 较为精确的快速近 ...
- word20161203
B-channel / B 信道 B-ISDN, broadband integrated services digital network / 广播综合业务数字网络 backbone router ...