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 ...
随机推荐
- Linq→join中指定多个条件
还是习惯先撸一段SQL * FROM User_Pic P AND P.Guid = R.UserPicGuid ORDER BY PicSize DESC 然后发现Linq中的join不能多条件.. ...
- iframe 内联框架
Iframe - 设置高度和宽度 height 和 width 属性用于规定 iframe 的高度和宽度. 属性值的默认单位是像素,但也可以用百分比来设定(比如 "80%"). 实 ...
- 怎么看网站是否开启CDN加速?测试网站全国访问速度方法详解
注意域名,动静分离的网站,只对静态文件的域名做了cdn 怎么看网站有没开启CDN? 要看一个网站是否开启CDN,方法很简单,只要在不同的地区ping网址就可以,比如在山东济南ping www.jb51 ...
- C++之map、list操作
#include <iostream> #include "map_struct.h" #include <map> using namespace std ...
- VIM使用学习笔记 : 按键说明
VIM有三种模式: 一般模式 上下左右移动光标,删除字符或删除整行,复制粘贴 编辑模式 i I i O a A r R 进入编辑模式 命令模式 在一般模式种输入 : / ?,可 ...
- apache 访问出现403 Forbidden
在linux虚拟机的apache上新增一个虚拟目录/var/wordpress,想把理论网挂上去. 在配置文件httpd.conf中,把”Include conf/extra/httpd-vhosts ...
- 制作自定义背景Button按钮、自定义形状Button的全攻略(转)
在Android开发应用中,默认的Button是由系统渲染和管理大小的.而我们看到的成功的移动应用,都是有着酷炫的外观和使用体验的.因此,我们在开发产品的时候,需要对默认按钮进行美化.在本篇里,笔者结 ...
- leetcode 100. Same Tree
Given two binary trees, write a function to check if they are equal or not. Two binary trees are con ...
- python 函数的调用 和执行 小知识
1.符号表 执行一个函数会引入一个用于函数的局部变量的新符号表. 更确切地说, 函数中的所有的赋值都是将值存储在局部符号表: 而变量引用首先查找局部符号表, 然后是上层函数的局部符号表, 然后是全局符 ...
- Opencv二值图像的分布直方图
Mat img; ]; int main() { VideoCapture video(); if (!video.isOpened()) { ; } Mat img; Mat img1, img2, ...