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 ...
随机推荐
- Shader 之 顶点变形
可以使3D物体通过顶点变形弯曲,常见于跑酷游戏的跑道.可向左.右.上.下弯曲. Shader "Custom/VertexColorCurved" { Properties { / ...
- POJ 1905 Expanding Rods
Expanding Rods Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 1 ...
- 数据源和JNDI的关系:
DataSource对象是由Tomcat提供的,因此不能在程序中采用创建一个实例的方式来生产DataSource对象,而需要采用Java的另一个技术JNDI,来获得DataSource对象的引用. T ...
- iOS开发——UI进阶篇(六)键盘处理
一.键盘通知我们经常需要在键盘弹出或者隐藏的时候做一些特定的操作,因此需要监听键盘的状态 键盘状态改变的时候,系统会发出一些特定的通知UIKeyboardWillShowNotification // ...
- iOS开发——UI基础-KVC
除了一般的赋值和取值的方法,我们还可以用Key-Value-Coding(KVC)键值编码来访问你要存取的类的属性. 如何使用KVC存取对象属性呢?看个示例 一.使用KVC存数据 定义一个person ...
- 客户端安全-xss-2解决方案
1.需求 提供xss解决方案 2.方式 对需要显示在html中的用户代码进行编码 3.处理方案 1.用户的数据到后端前用下面的编码层代码进行编码. function htmlEncodeCharact ...
- Linux system 函数的一些注意事项
在日常的代码编程中 , 我们可以利用system 函数去调用一些我们自己想调用的命令 , 并获取他的返回值. 函数的原型如下: int system(const char *command); 上一 ...
- 4 Handler相关类——Live555源码阅读(一)基本组件类
这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. Handler相关类概述 处理程序相关类一共有三个,其没有派生继承关系,但是其有友元关系和使用关系 ...
- [ruby on rails] 深入(2) ruby基本语法
1. 调试&注释&打印输出 1.1 调试 ruby属于解释型语言,即脚本,在linux上,脚本的执行无非三种: 1. 用解释器运行脚本 解释器 脚本文件 即:ruby 脚本文件 2. ...
- dtw算法优化(重写C语言版本)
1.缩小搜索范围 2.降低内存消耗