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 相关文章推荐
js跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
flexigrid 参数说明
Nov 23 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
Vue.js学习示例分享
Feb 05 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
详解Vue 项目中的几个实用组件(ts)
Oct 29 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 Javascript
给原生html中添加水印遮罩层的实现示例
Apr 02 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
PHP 事务处理数据实现代码
2010/05/13 PHP
php简单统计字符串单词数量的方法
2015/06/19 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
浅谈Python处理PDF的方法
2017/11/10 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
python实现密码强度校验
2020/03/18 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
电脑售后服务承诺书
2014/03/27 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
联谊会开场白
2015/06/01 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL