BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)


Posted in Javascript onAugust 18, 2016

今天收到程序组提交的一个兼容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日期控件在模态框中选择时间下拉菜单无效的解决方法(火狐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
繁简字转换功能
Jul 19 Javascript
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
JavaScript实现自动跳转文本功能
May 25 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
代码整洁之道(重构)
Oct 25 Javascript
vue-cli3.X快速创建项目的方法步骤
Nov 14 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 #Javascript
AngularJS 整理一些优化的小技巧
Aug 18 #Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 #Javascript
js获取form表单所有数据的简单方法
Aug 18 #Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 #Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 #Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 #Javascript
You might like
smtp邮件发送一例
2006/10/09 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
js加解密 脚本解密
2008/02/22 Javascript
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
Mootools 1.2教程 函数
2009/09/15 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
Python求解平方根的方法
2015/03/11 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
pandas.cut具体使用总结
2019/06/24 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
HSRP的含义以及如何工作
2014/09/10 面试题
什么是Web Service?
2012/07/25 面试题
出资证明书范本(标准版)
2014/09/24 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
物流业务员岗位职责
2015/04/03 职场文书
秋季运动会加油词
2015/07/18 职场文书
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python