У меня есть форма ( Payment.php ), которую я показываю на модальном экране, используя twitter bootstrap. В форме у меня есть поле даты, для которого я нашел этот загрузочный плагин.
Но проблема в том, что календарь загружается на родительский экран ( Index.php ), а не в модальную форму, где это действительно необходимо.
Может кто-нибудь предложить решение этого.
Ниже приведен код, который я пробовал.
Импорт:
<link href="css/bootstrap.css" rel="stylesheet"> <link href="css/datepicker.css" rel="stylesheet"> <script src="js/bootstrap-datepicker.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
PHP:
<div class="controls"> <input data-datepicker="datepicker" class="span3" value="2012-09-13" data-date-format="yyyy-mm-dd" id="dp2" > </div>
JS:
$('#dp2').datepicker();
Добавьте z-index в класс .datepicker и сделайте больше .modal
.datepicker { z-index: 9999; top: 0; left: 0; padding: 4px; margin-top: 1px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
После нескольких тестов я могу снова подтвердить свой комментарий к ответу @ m4k: Решение z-index через файл CSS не работает в Firefox 19 и 20 на OS X. Тем не менее, Chrome работает. Я еще не тестировал его в других браузерах или ОС.
Решение, которое работает для меня, состоит в том, чтобы установить z-index через конфигурацию даты jqery-ui, как показано ниже:
$('#datepicker').datepicker({ beforeShow: function() { $('#datepicker').css("z-index", 1051); } });
где z-индекс должен быть выше, чем один из модальных (в бутстрапе 2.3 модальный имеет 1050).
Еще более beforeShow решением может быть вызов метода в beforeShow который beforeShow определяет самый высокий в настоящий момент z-индекс на странице. На http://www.west-wind.com/weblog/posts/2009/Sep/12/jQuery-UI-Datepicker-and-zIndex вы найдете пример.
Обновление: автоматически установите z-index 1 выше, чем модальный
Простой пример, как определить, что z-индекс имеет базовый модальный:
$("#datepicker").closest(".modal").css("z-index")
Таким образом, метод beforeShow становится
$('#datepicker').datepicker({ beforeShow: function() { var $datePicker = $("#datepicker"); var zIndexModal = $datePicker.closest(".modal").css("z-index"); $datePicker.css("z-index", zIndexModal + 1); } });
… это не помогло мне. Я запускаю bootstrap 2.3.2, и независимо от того, как я пытаюсь выполнить javascript, javascript bootstrap всегда будет сбрасывать z-index datepicker обратно (в моем случае) 21. Конечно, есть способ сделать это в javascript, но я найти css путь довольно чистый.
Итак, это сделал трюк:
/* otherwise datepickers won't show in a modal dialog */ .datepicker { z-index:1051 !important; }
Я выполнил подход beforeShow, но должен был получить самый близкий модал от ввода для вычисления z-индекса, а затем обязательно установить z-index в отдельный div, который является календарем.
var DEFAULT_Z_INDEX = 10; $('#my-date-input') .datepicker() .on('show', function() { // Make sure that z-index is above any open modal. var $input= $(this); var modalZIndex = $input.closest('.modal').css('z-index'); var zIndex = DEFAULT_Z_INDEX; if (modalZIndex) { zIndex = parseInt(modalZIndex) + 1; } $('.datepicker').css("z-index", zIndex); });
HTML
<!-- Text input--> <div class="form-group"> <label class="col-sm-2 control-label" for="textinput">Date TO</label> <div class="col-sm-10"> <input type="text" id="DateToP" name="DateToP" placeholder="Post Code" class="form-control datepicker"> </div> </div>
CSS
<style type="text/css"> .datepicker { z-index:1051 !important; } </style>
JQuery
$('#DateToP').datepicker({ format: 'yyyy-mm-dd', autoclose: true });
Я использовал дисплей: none; атрибут файла CSS для .datepicker. И это сработало хорошо.