BootStrap日期控件在模態(tài)框中選擇時間下拉菜單無效的原因及解決辦法(火狐下不能點擊)
更新時間：2016年08月18日 11:36:21 作者：知兮
今天同事讓我?guī)退黄鸾鉀Q一個問題，關于兼容的bug問題，在火狐中使用模態(tài)框加載日期控件時選擇時間下拉菜單沒有效果（不能點擊），而在谷歌中卻是好的，下面小編附上原因分析及解決辦法，有需要的朋友可以參考下
今天收到程序組提交的一個兼容BUG，在火狐中使用模態(tài)框加載日期控件時選擇時間下拉菜單沒有效果（不能點擊），而在谷歌中卻是好的，
排錯思路：
1，在當前頁面主層放置一個時間控件，測試通過
2，在ajax加載頁放置一個時間控件，測試通過
3，在模態(tài)框最外層放置一個時間控件，不通過
主要原因是模態(tài)框與時間下拉菜單層級關系造成（z-index），因時間控件是收bootstrap的時間控件.js文件生成，所以導致在頁面與css樣式表中修改無效，網(wǎng)上有直接修改bootstrap的時間控件.js文件，然而bootstrap版本太多，不建議修改這個文件
解決辦法：
去掉最模態(tài)框最外層的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日期控件在模態(tài)框中選擇時間下拉菜單無效的解決方法(火狐)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡單彈幕效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
jquery EasyUI的formatter格式化函數(shù)代碼
以下實例格式化數(shù)據(jù)表格中的一列。如果金額小于20時使用自定義的格式器將文本變成紅色。2011-01-01
js的純前臺處理時會遇到將一個網(wǎng)頁的參數(shù),通過get方式,傳遞給下一個頁面的問題，此時可以獲取Url中的Get參數(shù)，具體如下，需要的朋友可以參考下2013-11-11
這篇文章主要介紹了jQuery入門之層次選擇器用法,以簡單實例形式分析了jQuery層次選擇器中ancestor descendant與parent>child的區(qū)別,需要的朋友可以參考下2015-12-12
bootstrap table sum總數(shù)量統(tǒng)計實現(xiàn)方法
這篇文章主要介紹了bootstrap table sum總數(shù)量統(tǒng)計實現(xiàn)方法,需要的朋友可以參考下2017-10-10
探討JQUERY JSON的反序列化類 using問題的解決方法
本篇文章是對JQUERY JSON的反序列化類 using問題的解決方法進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
jquery中快速取值的方法有很多，在本文為大家介紹下通過name實現(xiàn)快速取值，感興趣的朋友可以參考下2014-01-01
jquery動態(tài)添加帶有樣式的HTML標簽元素方法
下面小編就為大家分享一篇jquery動態(tài)添加帶有樣式的HTML標簽元素方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了jQuery中delegate()方法用法,實例分析了delegate()方法的功能、定義及為匹配元素的子元素添加一個或多個事件,并規(guī)定當這些事件發(fā)生時運行函數(shù)的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要給大家介紹了關于jQuery實現(xiàn)簡單彈出框效果的相關資料,幾天一直在研究JQuery,確實很好用,有很多需求都是要彈出框,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06