BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
更新时间：2016年08月18日 11:36:21 作者：知兮
今天同事让我帮他一起解决一个问题，关于兼容的bug问题，在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果（不能点击），而在谷歌中却是好的，下面小编附上原因分析及解决办法，有需要的朋友可以参考下
今天收到程序组提交的一个兼容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日期控件在模态框中选择时间下拉菜单无效的解决方法(火狐)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家详细介绍了jQuery实现简单弹幕效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
jquery EasyUI的formatter格式化函数代码
以下实例格式化数据表格中的一列。如果金额小于20时使用自定义的格式器将文本变成红色。2011-01-01
js的纯前台处理时会遇到将一个网页的参数,通过get方式,传递给下一个页面的问题，此时可以获取Url中的Get参数，具体如下，需要的朋友可以参考下2013-11-11
这篇文章主要介绍了jQuery入门之层次选择器用法,以简单实例形式分析了jQuery层次选择器中ancestor descendant与parent>child的区别,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了bootstrap table sum总数量统计实现方法,需要的朋友可以参考下2017-10-10
探讨JQUERY JSON的反序列化类 using问题的解决方法
本篇文章是对JQUERY JSON的反序列化类 using问题的解决方法进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
jquery中快速取值的方法有很多，在本文为大家介绍下通过name实现快速取值，感兴趣的朋友可以参考下2014-01-01
下面小编就为大家分享一篇jquery动态添加带有样式的HTML标签元素方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了jQuery中delegate()方法用法,实例分析了delegate()方法的功能、定义及为匹配元素的子元素添加一个或多个事件,并规定当这些事件发生时运行函数的使用技巧,需要的朋友可以参考下2015-01-01
这篇文章主要给大家介绍了关于jQuery实现简单弹出框效果的相关资料,几天一直在研究JQuery,确实很好用,有很多需求都是要弹出框,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
最新评论