今天收到程序组提交的一个兼容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日期控件在火狐下的模态框中选择时间下拉菜单无效的解决办法的更多相关文章

  1. bootstrap日期控件(双日期、清空等问题解决)

    bootstrap以它优美的外观和丰富的组件,使它成为目前最流行的前端框架.在项目开发中,我们使用它的日期控件确实遇到了一些问题: 1.日期控件后面两个图标点击触发失效 2.双日期关联问题 3.双日期 ...

  2. [转]通过AngularJS directive对bootstrap日期控件的的简单包装

    本文转自:http://www.cnblogs.com/Benoly/p/4109460.html 最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的 ...

  3. [整理]通过AngularJS directive对bootstrap日期控件的的简单包装

    最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的例子,可以使用AngularJS的directive做简单的处理,这样在html里直接使用申明的的形 ...

  4. bootstrap 日期控件常用选项

    使用bootstrap作为UI基础之后,为了尽可能的保持系统风格的一致性,通常我们不太会考虑再引入My97DatePicker作为日期控件. 作为潜在实现的选择之一,http://www.bootcs ...

  5. Tag It 一款 Jquery控件,当你在文本框中输入逗号时,自动帮你分隔开相关内容

    Demo地址:http://webspirited.com/tagit/ 使用方法: 除了JQuery脚本外,下面的脚本也是必须的,这些脚本你都可以去GitHub下载:https://github.c ...

  6. 在Linux下安装PHP过程中,编译时出现错误的解决办法

    在Linux下安装PHP过程中,编译时出现configure: error: libjpeg.(a|so) not found 错误的解决办法 configure: error: libjpeg.(a ...

  7. bootstrap 日期控件 bootstrap-datepicker

    http://www.bootcss.com/p/bootstrap-datetimepicker/

  8. bootstrap下modal模态框中webuploader控件按钮异常(无法点击)问题解决办法【转】

    http://bbs.csdn.net/topics/391917552 具体如下:   $(function () {         var _$modal = $('#MyModal');    ...

  9. bootstrap日期控件

    http://www.bootcss.com/p/bootstrap-datetimepicker/ <link href="js/b/css/bootstrap-datetimepi ...

随机推荐

  1. Windows Phone自带的语音识别

    WindowsPhone下语音操作包括: 1.程序内部的语音识别,用户可以通过语音识别进行输入或完成相关任务 2.控制程序的语音命令,控制程序启动.打开,并可对页面跳转等进行操作 这篇文章将构建一个简 ...

  2. UI第四节——UIImageView详解

    - (void)viewDidLoad { // super调用是必须的 [super viewDidLoad]; UIImage *image = [UIImage imageNamed:@&quo ...

  3. Mac OS 中的 Python(和 NumPy)开发环境设置

    http://www.python()tab.com/html/2013/pythonjichu_1010/582.html ()需要删除

  4. composer环境配置

    一 下载composer.phar http://pan.baidu.com/s/1nuDQBzz cmd命令行切换到composer.phar文件目录下 运行: echo @php "%~ ...

  5. Android 带清除功能的输入框控件ClearEditText,仿IOS的输入框

    转载请注明出处http://blog.csdn.net/xiaanming/article/details/11066685 今天给大家带来一个很实用的小控件ClearEditText,就是在Andr ...

  6. iOS开发——UI进阶篇(十七)CALayer,核心动画基本使用

    一.CALayer简介 1.CALayer在iOS中,文本输入框.一个图标等等,这些都是UIView你能看得见摸得着的东西基本上都是UIView,比如一个按钮.一个文本标签.一个其实UIView之所以 ...

  7. BZOJ1455——罗马游戏

    1.题目大意:维护一个数据结构,可以实现合并操作,还能询问最小值 2.分析:这种问题当然是可并堆啦 随便写了一个左偏树QAQ #include <cstdio> #include < ...

  8. web.xml 模板和Servlet版本

    最近没事干,写自己小项目(项目周期无限长.开发效率无限低)的时候,遇到web.xml的dtd声明不正确,这里罗列下从Eclipse里新建项目时,自动生成的web.xml,供以后遇到类似问题的时候进行参 ...

  9. Win10新版下virtualbox双击没有反应

    百度virtualbox 第一个就是Oracle官网,点击download,点击相应的版本,下载后右键管理员权限去安装,

  10. win8_64下安装paramiko

    win8_64下安装paramiko C:\Python35\Scripts>easy_install paramiko 提示 C:\Python35\Scripts>python Pyt ...