模式窗口内的Twitter Bootstrap Datepicker

我目前正在使用Twitter Bootstrap框架，当使用模式窗口时，我不能让js元素像datepicker或validation一样工作，虽然select和统一呈现正确。 请看下面我的模态窗口：

<div class="modal hide in" id="newMember" style="display: block; " aria-hidden="false"> <div class="modal-header"> <button class="close" data-dismiss="modal" type="button">×</button> <h3>New Member Form</h3> </div> <form accept-charset="UTF-8" action="/players" class="form-horizontal" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="KdL6cc2Vb53qeMY+PpBUS70myT4HX1uWofMUBolLea8="></div> <div class="modal-body"> <div class="widget-content nopadding"> <div class="control-group"> <label class="control-label" for="user_role">Role</label> <div class="controls"> <select id="user_role" name="user[role]" style="display: none; " class="chzn-done"><option value="">Select member role</option> <option value="1">Player</option> <option value="2">Coach</option> <option value="3">Parent</option> <option value="4">Manager</option> <option value="5">Non-player</option></select><div id="user_role_chzn" class="chzn-container chzn-container-single" style="width: 222px; "><a href="javascript:void(0)" class="chzn-single"><span>Select member role</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 220px; top: 0px; "><div class="chzn-search" style=""><input type="text" autocomplete="off" style="width: 212px; "></div><ul class="chzn-results"><li id="user_role_chzn_o_0" class="active-result result-selected" style="">Select member role</li><li id="user_role_chzn_o_1" class="active-result" style="">Player</li><li id="user_role_chzn_o_2" class="active-result" style="">Coach</li><li id="user_role_chzn_o_3" class="active-result" style="">Parent</li><li id="user_role_chzn_o_4" class="active-result" style="">Manager</li><li id="user_role_chzn_o_5" class="active-result" style="">Non-player</li></ul></div></div> </div> </div> <div class="control-group"> <label class="control-label" for="user_full_name">Full name</label> <div class="controls"> <input id="user_first_name" name="user[first_name]" placeholder="First Name" size="30" type="text"> </div> </div> <div class="control-group"> <label class="control-label" for="user_last_name">Last name</label> <div class="controls"> <input id="user_last_name" name="user[last_name]" placeholder="Last Name" size="30" type="text"> </div> </div> <div class="control-group"> <label class="control-label" for="user_email">Email</label> <div class="controls"> <input id="user_email" name="user[email]" placeholder="Email Address" size="30" type="text"> </div> </div> <div class="control-group"> <label class="control-label" for="user_date_of_birth">Date of birth</label> <div class="controls"> <input class="datepicker" data-date-format="dd/mm/yyyy" id="user_dob" name="user[dob]" placeholder="dd/mm/yyyy" readonly="readonly" size="30" type="text"> </div> </div> <div class="control-group"> <label class="control-label" for="user_gender">Gender</label> <div class="controls"> <select id="user_gender" name="user[gender]" style="display: none; " class="chzn-done"><option value="">Select gender</option> <option value="Male">Male</option> <option value="Female">Female</option></select><div id="user_gender_chzn" class="chzn-container chzn-container-single" style="width: 222px; "><a href="javascript:void(0)" class="chzn-single"><span>Select gender</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 220px; top: 0px; "><div class="chzn-search" style=""><input type="text" autocomplete="off" style="width: 212px; "></div><ul class="chzn-results"><li id="user_gender_chzn_o_0" class="active-result result-selected" style="">Select gender</li><li id="user_gender_chzn_o_1" class="active-result" style="">Male</li><li id="user_gender_chzn_o_2" class="active-result" style="">Female</li></ul></div></div> </div> </div> <div class="control-group"> <label class="control-label" for="user_team">Team</label> <div class="controls"> <select id="user_team_id" name="user[team_id]" style="display: none; " class="chzn-done"><option value="">None</option> <option value="4">Metro 3 East</option> <option value="1">State League 3</option> <option value="2">State League 4</option> <option value="3">Metro 3 South</option> <option value="5">Pennant E</option> <option value="6">Under 9 White</option> <option value="7">Under 9 Navy</option> <option value="8">Under 13 Pennant South East</option> <option value="9">Under 17 Pennant South East</option> <option value="10">Under 15 South (1)</option> <option value="11">Under 11 Pennant South East</option> <option value="12">Under 11 South</option></select><div id="user_team_id_chzn" class="chzn-container chzn-container-single" style="width: 222px; "><a href="javascript:void(0)" class="chzn-single"><span>None</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 220px; top: 0px; "><div class="chzn-search" style=""><input type="text" autocomplete="off" style="width: 212px; "></div><ul class="chzn-results"><li id="user_team_id_chzn_o_0" class="active-result result-selected" style="">None</li><li id="user_team_id_chzn_o_1" class="active-result" style="">Metro 3 East</li><li id="user_team_id_chzn_o_2" class="active-result" style="">State League 3</li><li id="user_team_id_chzn_o_3" class="active-result" style="">State League 4</li><li id="user_team_id_chzn_o_4" class="active-result" style="">Metro 3 South</li><li id="user_team_id_chzn_o_5" class="active-result" style="">Pennant E</li><li id="user_team_id_chzn_o_6" class="active-result" style="">Under 9 White</li><li id="user_team_id_chzn_o_7" class="active-result" style="">Under 9 Navy</li><li id="user_team_id_chzn_o_8" class="active-result" style="">Under 13 Pennant South East</li><li id="user_team_id_chzn_o_9" class="active-result" style="">Under 17 Pennant South East</li><li id="user_team_id_chzn_o_10" class="active-result" style="">Under 15 South (1)</li><li id="user_team_id_chzn_o_11" class="active-result" style="">Under 11 Pennant South East</li><li id="user_team_id_chzn_o_12" class="active-result" style="">Under 11 South</li></ul></div></div> </div> </div> <div class="control-group"> <label class="control-label" for="user_mobile">Mobile</label> <div class="controls"> <input id="user_mobile" maxlength="10" name="user[mobile]" placeholder="ie 0421813529" size="10" type="tel"> <span class="help-block"> <input name="user[private_mobile]" type="hidden" value="0"><div class="checker" id="uniform-user_private_mobile"><span><div class="checker" id="uniform-user_private_mobile"><span><input id="user_private_mobile" name="user[private_mobile]" type="checkbox" value="1" style="opacity: 0; "></span></div></span></div> <a href="javascript:void(0)" class="tip-bottom" data-original-title="Normally, all members of the team can see this information. If you don't want teammates to see this information, just click this checkbox. (Note: Team managers will always see this information.)">Private</a> </span> </div> </div> <div class="control-group"> <label class="control-label" for="user_manager_access">Manager access</label> <div class="controls"> <input name="user[manager]" type="hidden" value="0"><div class="checker" id="uniform-user_manager"><span><div class="checker" id="uniform-user_manager"><span><input id="user_manager" name="user[manager]" type="checkbox" value="1" style="opacity: 0; "></span></div></span></div> </div> </div> <div class="control-group"> <label class="control-label" for="user_admin_access">Admin access</label> <div class="controls"> <input name="user[admin]" type="hidden" value="0"><div class="checker" id="uniform-user_admin"><span><div class="checker" id="uniform-user_admin"><span><input id="user_admin" name="user[admin]" type="checkbox" value="1" style="opacity: 0; "></span></div></span></div> </div> </div> </div> </div> <div class="modal-footer"> <div class="pull-right"> <input class="btn btn-primary" name="commit" type="submit" value="Create User"> <a class="btn btn-danger" data-dismiss="modal" href="#">Cancel</a> </div> </div> </form> </div> 

Answer 1

在类datepicker中添加1051以上的z-index

在页面或CSS添加这样的东西

 <style> .datepicker{z-index:1151 !important;} </style> 

Answer 2

对我来说，它只在CSS中起作用！

 .datepicker {z-index: 1151 !important;} 

Answer 3

我用：

 body.modal-open .datepicker { z-index: 1200 !important; } 

这样：如果模式没有打开，并且你希望datepicker是在正常的z-索引（在我的情况下，我需要它在菜单下拉，它有一个z-索引1000）），有用。

如果模式是打开的，dateselect器需要超过模态z-索引（1040或1050），所以使用body.modal-openselect器。

我正在使用Bootstrap 3.1.1

Answer 4

正如mccannf在评论中所说：

我build议你看看你的引导CSS和JS。 你的模态被设置在非常高的z-索引值（99999）。 只要比较我的上述jsfiddle与你的

Answer 5

在类ui-datepicker中添加z-indez

 <style> .ui-datepicker{ z-index:1151 !important; } </style> 

Answer 6

根据http://www.daterangepicker.com/ （选项）

 $('#dispatch_modal').on('shown.bs.modal', function() { $('input:text:visible:first').focus(); // prepare datepicker $('.form_datepicker').daterangepicker({ singleDatePicker: true, showDropdowns: true, parentEl: '#dispatch_modal' }); }); 

`

parentEl解决了我的问题…

Answer 7

试试这段代码。

.ui-datepicker{ z-index:1151 !important; }

将在使用引导V3时解决问题

Answer 8

我觉得更好的是改变插件的逻辑function。 在第552行左右我改变了这个：

  var zIndex = parseInt(this.element.parents().filter(function(){ return $(this).css('z-index') !== 'auto'; }).first().css('z-index'))+10; 

进入这个：

  var zIndex = parseInt(this.element.parents().filter(function(){ return $(this).css('z-index') !== 'auto'; }).first().css('z-index')) + 10 * 1000; //think is enought 

Answer 9

我有这个错误，因为我滚动底部。 Datepicker在固定的顶部位置错了。 我现在只是使用它：

 $('#myModal').on('show.bs.modal', function (e) { $(document).scrollTop(0); }); 

现在工作正常。

Answer 10

你可以改变你的CSS文件bootstrap-timepicker/css/bootstrap-timepicker.css

从

 .bootstrap-timepicker-widget.dropdown-menu.open { display: inline-block; } 

至

 .bootstrap-timepicker-widget.dropdown-menu.open { display: inline-block; z-index:1151; } 

Answer 11

如果你使用引导V3尝试这个。

.bootstrap-datetimepicker-widget { z-index: 1200 !important; }
.bootstrap-datetimepicker-widget { z-index: 1200 !important; } 

Answer 12

对于BootsTrap日历使用这个

/ 日历索引CSS /

 .bootstrap-datetimepicker-widget { z-index:99999 !important; } 

Answer 13

对于Bootstrap 3.x和Ace Template wrapbootstrap

dateselect器和时间select器在模式中

 <style> body.modal-open .datepicker { z-index: 1050 !important; } body.modal-open .bootstrap-timepicker-widget { z-index: 1050 !important; } </style> 

Answer 14

 $('#effective_to').datepicker({ dateFormat: "dd-mm-yyyy", changeMonth: true, changeYear: true, beforeShow: function() { $('#ui-datepicker-div').addClass('datepicker'); } }); 

CSS

 .datepicker { z-index: 100000 !important; display: block; } 

这工作forms我。 即使我通过ajax调用模型

Answer 15

尝试更改.modal和.modal-backdrop小于.datepicker z-index值的z-index值。

Answer 16

我来帮你，

你可以更新你的bootstrap.min.css

在类的下拉菜单中，您可以将z-index值更改为2000

所以datepicker会出现

Answer 17

尝试使用这个代码，它为我工作。 顺便说它来自这个网站https://github.com/eternicode/bootstrap-datepicker/issues/464 。

 $('#datepicker').datepicker().on('show', function () { var modal = $('#datepicker').closest('.modal'); var datePicker = $('body').find('.datepicker'); if (!modal.length) { $(datePicker).css('z-index', 'auto'); return; } var zIndexModal = $(modal).css('z-index'); $(datePicker).css('z-index', zIndexModal + 1); }); 

Answer 18

FWIW。 死灵但仍然。

for <link href="ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css" rel="stylesheet">

我需要

 <style type="text/css"> .ui-timepicker-container {z-index: 1151 !important;} </style> 

在文档头部为它接受覆盖

在这之前，我尝试了大多数其他解决scheme。

Answer 19

尝试这个

 #ui-datepicker-div { z-index: 100000; }