В настоящее время я использую платформу Twitter Bootstrap, и при использовании модальных окон я не могу заставить элементы js работать как datepicker или проверка, хотя выбранный и однородный рендеринг выполняется правильно. пожалуйста, посмотрите мое модальное окно ниже:
<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="i.e 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>
jquery
twitter-bootstrap
datepicker
Босс Насс
источник
источник
Ответы:
добавить z-index выше 1051 в класс datepicker
добавить что-то подобное на странице или css
<style> .datepicker{z-index:1151 !important;} </style>
источник
.ui-datepicker
для меня это работало только с! important в css
.datepicker {z-index: 1151 !important;}
источник
Я использую:
body.modal-open .datepicker { z-index: 1200 !important; }
Таким образом: если модальное окно не открыто, и вы хотите, чтобы датапикер находился с обычным z-индексом (в моем случае мне нужно, чтобы он находился в раскрывающемся меню с z-индексом 1000), оно работает.
Если модальный является открытой, DatePicker должен быть более модальное Z-индекс (1040 или 1050), поэтому использовать
body.modal-open
селектор.Я использую Bootstrap 3.1.1
источник
Согласно 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 решил мою проблему ...
источник
Добавить z-indez в класс ui-datepicker
<style> .ui-datepicker{ z-index:1151 !important; } </style>
источник
Как сказал Макканнф в своем комментарии :
Я рекомендую вам взглянуть на свой начальный CSS и JS. Для вашего модального окна установлено очень высокое значение z-index (99999). Просто сравните мой jsfiddle выше с вашим
источник
Попробуйте использовать этот фрагмент кода.
.ui-datepicker{ z-index:1151 !important; }
решит проблему, когда вы используете bootstrap V3
источник
.ui-datepicker
работал у меня там, где.datepicker
не работал .Думаю, лучше изменить логическую функцию в плагине. В строке 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
источник
У меня была эта ошибка, потому что я прокручивал вниз. У Datepicker фиксировалось неправильное верхнее положение. Я просто использую это сейчас как:
$('#myModal').on('show.bs.modal', function (e) { $(document).scrollTop(0); });
и теперь он работает нормально.
источник
вы можете изменить свой файл 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; }
источник
если вы используете bootstrap V3, попробуйте это.
.bootstrap-datetimepicker-widget { z-index: 1200 !important; }
источник
Для Bootstrap 3.x и Ace Template wrapbootstrap
Datepicker и Timepicker внутри модального окна
<style> body.modal-open .datepicker { z-index: 1050 !important; } body.modal-open .bootstrap-timepicker-widget { z-index: 1050 !important; } </style>
источник
$('#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; }
Это работает у меня. Хотя я вызвал модель через ajax
источник
Эти решения отлично сработали для меня, чтобы отобразить datepicker поверх модального окна начальной загрузки.
http://jsfiddle.net/cmpgtuwy/654/
HTML
<br/> <div class="wrapper"> Some content goes here<br /> Some more content. <div class="row"> <div class="col-xs-4"> <!-- padding for jsfiddle --> <div class="input-group date" id="dtp"> <input type="text" class="form-control" /> <span class="input-group-addon"> <span class="glyphicon-calendar glyphicon"></span> </span> </div> </div> </div> </div>
Javascript
$('#dtp').datetimepicker({ format: 'MMM D, YYYY', widgetParent: 'body'}); $('#dtp').on('dp.show', function() { var datepicker = $('body').find('.bootstrap-datetimepicker-widget:last'); if (datepicker.hasClass('bottom')) { var top = $(this).offset().top + $(this).outerHeight(); var left = $(this).offset().left; datepicker.css({ 'top': top + 'px', 'bottom': 'auto', 'left': left + 'px' }); } else if (datepicker.hasClass('top')) { var top = $(this).offset().top - datepicker.outerHeight(); var left = $(this).offset().left; datepicker.css({ 'top': top + 'px', 'bottom': 'auto', 'left': left + 'px' }); } });
CSS
.wrapper { height: 100px; overflow: auto;} body { position: relative; }
источник
Попробуйте изменить значение г-индексный
.modal
и.modal-backdrop
меньше , чем.datepicker
значение Z-индекс.источник
Для каландра BootsTrap используйте это
/ Календарный указатель CSS /
.bootstrap-datetimepicker-widget { z-index:99999 !important; }
источник
попробуйте использовать этот код, он работает для меня. кстати, он пришел с этого сайта 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); });
источник
Fwiw. Некро но все же.
за
<link href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css" rel="stylesheet">
мне было нужно
<style type="text/css"> .ui-timepicker-container {z-index: 1151 !important;} </style>
в HEAD документа, чтобы он принял переопределение
Я пробовал почти все другие решения, прежде чем прибегать к этому.
источник
// re initialze datepicker $(".bootstrap-datepicker").bsdatepicker({ format: "yyyy-mm-dd", autoclose: true, }).on('changeDate', function (ev) { $(this).bsdatepicker('hide'); }); // $(".dropdown-menu").css({'z-index':'1100'});
источник
попробуй это
#ui-datepicker-div { z-index: 100000; }
источник
давай я тебе помогу,
вы можете обновить свой bootstrap.min.css
в раскрывающемся меню класса вы можете изменить значение z-index на 2000
так что датапикер появится
источник
Оберните код JavaScript вашего датапикера внутрь
function pageLoad() {}
источник