Javascript-форум - datepicker jquery-ui fancybox z-index

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - datepicker jquery-ui fancybox z-index (https://javascript.ru/forum/dom-window/59924-datepicker-jquery-ui-fancybox-z-index.html)

datepicker jquery-ui fancybox z-index

Добрый день!

На странице подключена возможность редактирование отдельных блоков в окнах fancybox.

В открывающемся окне fancybox подключен datepicker jquery-ui.

Выявлены следующие глюки

1. Открываю окно fancybox , datepicker jquery-ui работает, календарь открывается. Закрываю окно fancybox и опять открываю, datepicker jquery-ui не работает

2. Если в родительском окне есть элемент datepicker jquery-ui, то при открытии с родительского окна fancybox, datepicker jquery-ui так же не работает.

То, что нарыл указывает на z-index.
Пробовал явно в стилях прописать

#ui-datepicker-div {z-index: 10000 !important;}

не помогает, т.к. при просмотре исходника в работающем окне, у div datepicker jquery-ui стили прописываются прямо в коде и выглядит вот так:

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="position: absolute; top: 451px; left: 699px; z-index: 8031; display: block;">

т.е. он перекрывает мой стиль в css

В свою очередь у fancybox значение z-index колеблется в диапазоне 8030-8060

Попробовал изменить значение в стилях у fancybox, но не помогло -(

Может кто подскажет еще решение?

Как я понял в стилях:
#ui-datepicker-div {z-index: 10000 !important;}

А в HTML:
z-index: 8031;

Здесь по идее должны работать стили, так как !important, я всегда в JQuery UI так перебивал стили и всё работало. Может ты сам файл стилей не подключил? или вместо Латиницы: z-index, Кирилицу: z-indеx.

Низнаю, странная ситуация. Попробуй поотклучать плагины, повыдерать части кода. может найдёшь где ошибка.

А что мешает у fancybox, z-index изменить, откуда это число 8030-8060? Также z-index: 5000!important; попробуй.

Я тут вспомнил fancybox добовляет свой html в конец документа,
А потом удаляет.

Может он тупо удалил твой html с datepicker.
Попробуй подключать datepicker при открытии fancybox.
Ну или поменяй fancybox на что нибудь другое, к примеру JQuery UI Dialog.

Открываю окно fancybox , datepicker jquery-ui работает, календарь открывается. Закрываю окно fancybox и опять открываю, datepicker jquery-ui не работает

fancybox and datepicker

наверно вы что-то не договариваите ...

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>demo</title>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css">
  <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
  <script type='text/javascript' src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
  <script type='text/javascript' src="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<style type="text/css">
#ui-datepicker-div{
  font-size: 12px;
}
#info{
  display: none;
}

</style>
<script type='text/javascript'>
 $(function () {
     $(".test").fancybox({
         type: 'inline'
     });
    $('input[name="tags"]').datepicker();

 });
</script>
</head>
<body>
<a class="test" href="#info" >go fancyboxinfo</a>
<div id="info">
<input id="text_tag_input" type="text" name="tags" />
</div>

</body>
</html>

хороший пример, буду копаться в своем коде, видимо точно, что-то не договариваю...

Спасибо!

Добрый день, уважаемые форумчане!

Сегодня вернулся к данной теме, и вот что интересно, моя ошибка, то появляется, то нет, какая-та она ветреная, я бы даже сказал лёгкого поведения.

Есть ли какие-то методы для отлова подобных ошибок? Я не программист, видимо не хватает знаний, порой для себя лично что-то делаю.

Подскажите, есть какие-то анализаторы, которые можно к проекту подключить и отследить что происходит при кликах и т.п.?

методом научного тыка нашел в чем причина была. В вызываемом fancybox дочернем окне, было повторное подключение jquery-ui.min.js как только оставил только в родительском, проблема ушла.

В качестве пользы для себя, узнал новое про z-index. Мелочь, а приятно. Не знаю, что мне эта информация даст с точки зрения вечности, но радость момента я получил :)

Теперь благодарности:
Благодарю
Алексея Петровича за поддержку и предлагаемые решения!

Особое благодарю Рони, за терпение и помощь

;)