今天收到程序组提交的一个兼容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. R笔记1

    gsub format > measurements<-c('3.95*3.99*2.43mm','3*3*5mm','2*2*2mm') > measurements [1] &q ...

  2. Android 如何实现带滚动条的TextView,在更新文字时自动滚动到最后一行?

    1.在布局文件中放置一个TextView,给它添加scrollbars和fadeScrollbars两个属性. 如下设置:滚动条为垂直滚动条,并且一直可见(当TextView中的文字行数超过页面能显示 ...

  3. ios 防止按钮快速点击造成多次响应的避免方法。

    - (void)starButtonClicked:(id)sender { //先将未到时间执行前的任务取消. [[self class] cancelPreviousPerformRequests ...

  4. 一个C#的与web服务器交互的HttpClient类

    using System; using System.Collections.Generic; using System.IO; using System.Text; using System.Net ...

  5. 在linux下安装Python:

    # 下载最新版本 cd /usr/local/src/ sudo wget http://www.python.org/ftp/python/3.3.2/Python-3.3.2.tar.bz2 su ...

  6. [转载]html中DTD使用小结

    原文链接:http://www.jb51.net/web/36856.html DTD 是一套关于标记符的语法规则.它是XML1.0版规格得一部分,是html文件的验证机制,属于html文件组成的一部 ...

  7. jquery的change():下拉框值改变时触发

    <script src="jquery.min.js" type="text/javascript"></script> <scr ...

  8. java读取文件

       一个字节一个字节地读取                  File file =          InputStream inputStream =                       ...

  9. 如何用极路由+OpenWrt+RTL电视棒搭建一台SDR服务器,并隐秘地捕获和传输数据

    0×00 前言 近期因为有个从异地捕获无线信号的需求,便尝试着用OpenWrt+公网IP搭建了一台SDR服务器.如果有小伙伴嫌SDR硬件天线看起来太乱.或者电脑没有足够的USB接口也可在局域网搭建SD ...

  10. NET程序内存分析工具CLRProfiler的使用(性能测试)

    http://blog.csdn.net/wy3552128/article/details/8158938 大家都知道.net有一套自己的内存(垃圾)回收机制,除非有一些数据(方法)长期占有内存不随 ...