PHP.SU

Программирование на PHP, MySQL и другие веб-технологии

PHP.SU Портал

Главная

Помощь

Поиск

Поиск Яндекс Вакансии

Пользователи

Здравствуйте, Гость

( Вход · Регистрация · Правила форума )

Забыли пароль?

lightbox баг повторного отображения

Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript (Модератор: armancho7777777)

Страниц (1): [1]

Без описания

Поиск в теме | Версия для печати

adrea_007	Отправлено: 04 Сентября, 2012 - 12:50:52
Новичок Покинул форум Сообщений всего: 27 Дата рег-ции: Авг. 2012 Помог: 0 раз(а)	CODE (javascript): скопировать код в буфер обмена / ============= lightbox ============= / var hide_lightbox = false; $('.lightbox_show').mouseout(function() { hide_lightbox = true; }); $('.lightbox_show').mouseover(function() { hide_lightbox = false; }); $('body').click(function () { if(hide_lightbox) { $('#lightbox_overlay').remove(); $('body').css('overflow-y', 'auto'); hide_lightbox = false; } }); // позиционирование контейнера function positionLightbox() { var top = ($(window).height() - $('.lightbox_show').height()) / 2; var left = ($(window).width() - $('.lightbox_show').width()) / 2 $('#lightbox_container').css({ 'top' : top, 'left': left }); } // показываем затенение, скрываем полосу прокрутки function lightbox() { // скрыть полосы прокрутки $('body').css('overflow-y', 'hidden'); // показываем лайтбокс $('<div id="lightbox_overlay" class="group"></div>') .css('top', $(document).scrollTop()) .appendTo('body'); // вставляем в лайтбокс контейнер $('<div id="lightbox_container" class="group"></div>') .appendTo('#lightbox_overlay'); } // ============= окошечко вход vk и акаунт сайта ============= // $('a.login').click(function(event) { event.preventDefault(); // запускаем лайтбокс lightbox(); // помещаем и показываем форму входа в контейнере $('.lightbox_login').appendTo('#lightbox_container'); // центрируем контейнер positionLightbox(); }); написал простенький lightbox все работает lightbox закрывается при клике на любую область экрана следующим кодом: CODE (javascript): скопировать код в буфер обмена $('body').click(function () { if(hide_lightbox) { $('#lightbox_overlay').remove(); $('body').css('overflow-y', 'auto'); hide_lightbox = false; } но суть не в этом при повторном запуске lightbox'а, затенение показывается, а в него не вставляется контейнер, т.е. со следующих строк код не работает CODE (javascript): скопировать код в буфер обмена // вставляем в лайтбокс контейнер $('<div id="lightbox_container" class="group"></div>') .appendTo('#lightbox_overlay');

adrea_007	Отправлено: 05 Сентября, 2012 - 10:47:46
Новичок Покинул форум Сообщений всего: 27 Дата рег-ции: Авг. 2012 Помог: 0 раз(а)	Решил проблему, если кого-то заинтересует мой lightbox расскажу об изменениях. Проблема была в том, что метод appendTo перемещаем нужный для вставки в лайтбок объект из body вообще А закрывал я lightbox методом remove(), что удаляем и lightbox и перемещенный объект, т.е. нужного мне элемента больше нет в DOM'е Мы просто создаем переменную и помещаем туда объект с которым работаем и перед закрытием лайтбокса возвращаем его обратно в DOM Добавлено всего три строчки в код и вуаля CODE (javascript): скопировать код в буфер обмена / ============= lightbox ============= / var element_lightbox; // хранит в себе текущий рабочий елемент, для обратного возврата в body var hide_lightbox = false; $('.lightbox_show').mouseout(function() { hide_lightbox = true; }); $('.lightbox_show').mouseover(function() { hide_lightbox = false; }); $('body').click(function () { if(hide_lightbox) { // перед закрытием лайтбокса помещаем рабочий элемент обратно в body element_lightbox.appendTo('body'); $('#lightbox_overlay').remove(); $('body').css('overflow-y', 'auto'); hide_lightbox = false; } }); // позиционирование контейнера function positionLightbox() { var top = ($(window).height() - $('.lightbox_show').height()) / 2; var left = ($(window).width() - $('.lightbox_show').width()) / 2; $('#lightbox_container').css({ 'top' : top, 'left': left }); } // показываем затенение, скрываем полосу прокрутки function lightbox() { // скрыть полосы прокрутки $('body').css('overflow-y', 'hidden'); // показываем лайтбокс $('<div id="lightbox_overlay" class="group"></div>') .css('top', $(document).scrollTop()) .appendTo('body'); // вставляем в лайтбокс контейнер $('<div id="lightbox_container" class="group"></div>') .appendTo('#lightbox_overlay'); } // ============= окошечко для входа на сайт ============= // $('a.login').click(function(event) { event.preventDefault(); // сохраняем елемент для предотвращения потери после удаления лайтбокса element_lightbox = $('.lightbox_login'); // запускаем лайтбокс lightbox(); // помещаем и показываем форму входа в контейнере $('.lightbox_login').appendTo('#lightbox_container'); // центрируем контейнер positionLightbox(); (Отредактировано автором: 05 Сентября, 2012 - 10:48:40)

miak	Отправлено: 16 Декабря, 2016 - 14:59:55
Новичок Покинул форум Сообщений всего: 1 Дата рег-ции: Дек. 2016 Помог: 0 раз(а)	Добрый день. у меня проблема с лайбоксом, не могу разобраться с этим, помогите пожалуйста... Надо поставить запрет на прокрутку страницы при закрытии лайтбокса. т.е. при закрытии лайтбокса страница прокручивается к началу страницы.

Поиск в теме | Версия для печати

Страниц (1): [1]

Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)

« JavaScript & VBScript »

Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.