2012-03-28 2 views
0

안녕하세요. 웹 사이트의 라이트 박스를 개발하는 동안 어딘가에서 코드를 생성하는 데 오류가있는 것 같습니다. 라이트 박스를 두 번 클릭하면 정상적으로 작동하고 모든 것이 잘됩니다.하지만 열려고하면 그것은 버그가 interfere.I 것 같다 세 번째는 jsFiddle에 전체 웹 사이트의 코드를 게시 한 :LightBox bug opening opening

http://jsfiddle.net/Ywpdh/

에주의 만 "로그인"버튼을 오른쪽 상단 corner.When 로그인 버튼을 클릭하면 라이트 박스가 나타납니다. 오른쪽 상단 사각형을 클릭하면 닫을 수 있습니다. 로그인 버튼을 세 번 클릭하면 버그가 나타납니다.이 시점에서 작은 사각형은 계속 동작하는 것처럼 보입니다. ainer에게 overflow가 주어진다. 숨겨진 속성은 사실이 아니다. 나는 모든 현대적인 브라우저에서 코드를 테스트했는데, 같은 버그가있다. 누가 무슨 일이 일어나는지 말해 줄 수 있니?

+0

관련없는 팁 : 드롭 다운 메뉴의 링크에는'disp lay : block;'그래서 그들은 모두 LI를 채우기 위해 확장합니다. – ajax333221

+0

저는 웹 개발의 초보자이기 때문에 모든 팁을 환영합니다 – user1146440

+0

방화범을 사용하여 conatiner가 오버플로를 얻었습니다 : exit div가 두 번째 클릭 될 때 숨김 , 그것이 어디에서 가져올 지 알 수 없습니다. 오버플로 추가 : 라이트 박스 기능에서 너비와 높이를 설정할 때 보이지만 오버플로가 숨겨진 이유/위치를 찾는 것이 좋습니다. – Dampsquid

답변

1

파이어 버그를 사용하면 두 번째로 exit div를 클릭 할 때 conatiner가 오버플로됩니다.

코드 줄이기 및 주석 처리 후 문제의 원인이되는 너비와 높이의 애니메이션이었습니다. 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

그것을 해결 한 고맙습니다. – user1146440