2012-03-28 2 views
0

Привет, разрабатывая лайтбокс для веб-сайта, кажется, что я сделал ошибку при создании моего кода где-нибудь. Если я нажму на лайтбокс два раза, он работает нормально, и все хорошо. Но когда я пытаюсь открыть это третий раз, когда ошибка, кажется interfere.I выложили код для всего сайта на jsFiddle:Ошибка LightBox при открытии

http://jsfiddle.net/Ywpdh/

Обратите внимание только на кнопку «Вход» в правом верхнем углу corner.When кнопку Войти щелкнув по лайтбокс, вы можете закрыть его, щелкнув правый верхний прямоугольник. Ошибка появляется только после нажатия кнопки входа в систему в третий раз. В этот момент маленький прямоугольник, кажется, ведет себя так, как будто он продолжается ainer получает переполнение: скрытое свойство что-то, что не соответствует действительности. Я протестировал код во всех современных браузерах. Я получаю ту же ошибку. Может кто-нибудь, пожалуйста, скажите мне, что происходит?

+0

Несвязанный совет: ссылки в выпадающих меню должны иметь 'disp lay: block; 'поэтому они расширяются, чтобы заполнить все LI – ajax333221

+0

Спасибо, что я все еще новичок в веб-разработке, поэтому каждый совет приветствуется – user1146440

+0

с использованием firebug, conatiner действительно переполняется: скрывается, когда exit div нажимается на второй раз , не может видеть, откуда она это получается. добавление переполнения: видимое, когда вы устанавливаете ширину и высоту в функции лайтбокса, заставляет его работать, но было бы полезно узнать, почему/где добавляется переполнение: скрыто. – Dampsquid

ответ

1

Использование firebug, conatiner действительно переполняется: скрывается, когда exit div нажимается во второй раз.

После того, как вы сократили код и закомментировали это была анимация ширины и высоты, которые вызывают проблему.

поиск Google для Jquery aminate вызвало переполнение: скрытый я наткнулся на этот SO размещать

jQuery .animate() forces style "overflow:hidden"

Так кажется, что Вы должны сбросить переполнение себя

Обновлено ваш Fiddle

function lighbox(){ 
    var width = $(window).width()/2 - ($('div.lightbox').width()/2); 
    var height = $(window).height()/2 - ($('div.lightbox').height()/2); 
    var body = $('body'); 
    body.css('overflowY','hidden'); 
    $('div#bg-lightbox').fadeTo('slow',0.9) 
    $('div#lightbox').css({ 
     'left':width, 
     'top':height, 
     'overflow': 'visible'  // *** added this line 
    }).stop() 
     .animate({ 
      'width':'+=500px', 
      'height':'+=250px', 
      'left':'-=300px', 
      'top':'-=200px', 
      'opacity':'1' 
     }, 'slow' , 'swing') 
+0

Thanx, который решил это – user1146440

Смежные вопросы