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 ...
随机推荐
- [译]ASP.NET 5: New configuration files and containers
原文:http://gunnarpeipman.com/2014/11/asp-net-5-new-configuration-files-and-containers/ ASP.NET vNext提 ...
- SQL如何将A,B,C替换为'A','B','C'
因为涉及到逗号,和单引号' 本来想一次转换成功, 但是最后貌似没有好的办法, 只有分两次完成了 select REPLACE(REPLACE('A,B,C',',','>,>'),'> ...
- Linux 下新增虚拟内存
问题描述,电脑内存1G.在启用elasticsearch的时候,报错 Java HotSpot(TM) 64-Bit Server VM warning: INFO: os::commit_memor ...
- mongodb certification
又偷懒 也有学到不少东西 这个东西算是小结啦 给2013年的碌碌无为挽回点面子 哈哈~
- js分页--存储数据并进行分页
//分页方法 var page = function(){ this.v = { o:null,//ul父级层 home:null, previous:null, next:null, last:nu ...
- HDU 2222 AC自动机模板题
题目: http://acm.hdu.edu.cn/showproblem.php?pid=2222 AC自动机模板题 我现在对AC自动机的理解还一般,就贴一下我参考学习的两篇博客的链接: http: ...
- 锋利的jQuery书中推荐的几款插件
1.jQuery表单验证插件——Validation 2.jQuery表单插件——Form 3.模态窗口插件——SimpleModal 4.管理Cookie的插件——Cookie 5.jQuery U ...
- Web服务精讲–搭个 Web 服务器(二)
导读 曾几何时,你所选择的 Python Web 框架会限制你所可选择的 Web 服务器,反之亦然.如果某个框架及服务器设计用来协同工作的,那么一切正常. 在第一部分中,我提出了一个问题:“如何在你刚 ...
- 水面shader 线性擦除
// Upgrade NOTE: replaced 'PositionFog()' with multiply of UNITY_MATRIX_MVP by position // Upgrade N ...
- Android学习笔记(二十二)——短信接收与发送
//此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 当手机接收到一条短信的时候, 系统会发出一条值为 android.provider.Telephony.SMS ...