實施的jQuery DatePicker的自舉模式

我的問題http://jsfiddle.net/sudiptabanerjee/93eTU/實施的jQuery DatePicker的自舉模式

在模態窗口問題創建的jsfiddle是更改月份和年份變化連擊。

a）IE 11：一切正常按預期工作 b）Chrome版本31，在月份組合選擇，自舉模態隱藏。 c）Firefox v26，月和年下拉列表不起作用。

請幫忙。

HTML

<!-- Button trigger modal --> 
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button> 
<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <h4 class="modal-title" id="myModalLabel">Modal title</h4> 

     </div> 
     <div class="modal-body"> 
      <div class="col-md-12"> 
       <div class="row"> 
        <label for="idTourDateDetails">Tour Start Date:</label> 
        <div class="form-group"> 
         <div class="input-group"> 
          <input type="text" name="idTourDateDetails" id="idTourDateDetails" readonly="readonly" class="form-control clsDatePicker"> <span class="input-group-addon"><i id="calIconTourDateDetails" class="glyphicon glyphicon-th"></i></span> 

         </div> 
        </div>Alt Field: 
        <input type="text" name="idTourDateDetailsHidden" id="idTourDateDetailsHidden"> 
       </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 
<!-- /.modal -->

CSS

.clsDatePicker { 
z-index: 100000; 
}

$('#idTourDateDetails').datepicker({ 
dateFormat: 'dd-mm-yy', 
minDate: '+5d', 
changeMonth: true, 
changeYear: true, 
altField: "#idTourDateDetailsHidden", 
altFormat: "yy-mm-dd" 
});

來源

2014-01-11 Sudipta Banerjee

這是因爲該模式強制實施專注於自身。如上所述，這裏有一個解決方案here。將下面的腳本添加到您的js文件中。而已。

Working Demo

jQuery的

// Since confModal is essentially a nested modal it's enforceFocus method 
// must be no-op'd or the following error results 
// "Uncaught RangeError: Maximum call stack size exceeded" 
// But then when the nested modal is hidden we reset modal.enforceFocus 
var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus; 

$.fn.modal.Constructor.prototype.enforceFocus = function() {}; 

$confModal.on('hidden', function() { 
    $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn; 
}); 

$confModal.modal({ backdrop : false });

來源

2014-01-13 10:15:47

+1，我也有這個問題，這個解決方案工作 – a7omiton

只添加了這個$ .fn.modal.Constructor.prototype.enforceFocus = function（）{};它的工作很好謝謝http://jsfiddle.net/sudiptabanerjee/93eTU/22/。但是，您能否提供更多關於其他代碼的細節以及爲什麼它是必要的。 –

@SudiptaBanerjee請參閱** [這篇文章]（http://stackoverflow.com/questions/13649459/twitter-bootstrap-multiple-modal-error/19190216#19190216）** –

大廈關閉Surjith的回答，我加了一個try/catch塊來解決ReferenceError異常爲confModal是不確定的。

的CoffeeScript：

enforceModalFocusFn = $.fn.modal.Constructor::enforceFocus 

$.fn.modal.Constructor::enforceFocus = -> 

try 
    $confModal.on "hidden", -> 
    $.fn.modal.Constructor::enforceFocus = enforceModalFocusFn 
    return 
    $confModal.modal backdrop: false 
catch error 
    if error.name != 'ReferenceError' 
    throw error

來源

2014-09-03 20:07:48 crftr

jQuery版本@crftr答案

var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus; 
$.fn.modal.Constructor.prototype.enforceFocus = function() {}; 
try{ 
    $confModal.on('hidden', function() { 
     $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn; 
    }); 
    $confModal.modal({ backdrop : false }); 
} 
catch (error) { 
    if(error.name != 'ReferenceError') 
     throw error; 
}

來源

2015-08-21 09:11:37

越容易......只需要這一行評論到您的boostrap.js that.enforceFocus（）。

來源

2016-07-25 15:42:50

在庫中進行更改對您來說可能更容易，但如果您想讓庫繼續保持最新，可能會變成一場噩夢。 –

實施的jQuery DatePicker的自舉模式

回答

相關問題