Modal 팝업은 FireFox에서 작동하지만 다른 브라우저에서는 작동하지 않습니다.

Question

버튼을 클릭 할 때 팝업 화면을 만드는 모달 팝업을 개발했습니다.

AddToBasketButton 클릭 이벤트 또는 창을 열리는 AskqlnkBtn 클릭 이벤트입니다.

내 코드는 FireFox에서는 완벽하게 작동하지만 Internet Explorer/Chrome에서는 완벽하게 작동하지 않습니다.

코드를 실행할 때 눈에 띄는 JavaScript 오류는 없습니다 (알 수있는 한).

이전 브라우저에서 링크를 클릭하면 화면이 어두워 지므로 loadPopup은 어떻게 든 작동해야합니다. 당신이 내 웹 사이트, you can see it here.에 코드를 경험하고 싶다면

:

는 스스로 문제를 참조하십시오. "Læg i kurv"버튼을 클릭하면 스스로 시도 할 수 있습니다.

어떤 아이디어가 잘못되었을 수 있습니까? 나는 몇 시간 동안 그것을보고 있었고, 단서가 없다!

내 코드 :

function loadPopup() { 
     //loads popup only if it is disabled 
     if ($('#<%=bgPopup.ClientID %>').data("state") == 0) { 
      $('#<%=bgPopup.ClientID %>').css({ 
       "opacity": "0.7" 
      }); 
      $('#<%=bgPopup.ClientID %>').fadeIn("medium"); 
      $('#<%=ReportError.ClientID%>').fadeIn("medium"); 
      $('#<%=bgPopup.ClientID %>').data("state", 1); 
     } 
    } 

    function disablePopup() { 
     if ($('#<%=bgPopup.ClientID %>').data("state") == 1) { 
      $('#<%=bgPopup.ClientID %>').fadeOut("medium"); 
      $('#<%=ReportError.ClientID %>').fadeOut("medium"); 
      $('#<%=bgPopup.ClientID %>').data("state", 0); 
     } 
    } 

    function setOrdering() { 
     $("#contact-headline").text('Bestil produkt'); 
     $("#contact-messagelbl").text('Evt. kommentar'); 
     $('#<%=ContactTypeHiddenLbl.ClientID %>').val("bestil"); 
    } 

    function setQuestions() { 
     $("#contact-headline").text('Stil spørgsmål'); 
     $("#contact-messagelbl").text('Indtast dit spørgsmål'); 
     $('#<%=ContactTypeHiddenLbl.ClientID %>').val("spørgsmål"); 
    } 

    function centerPopup() { 
     $('#<%=ReportError.ClientID%>').center(); 
    } 

    function resetContactControls() { 
     $('#<%=ContactMailBox.ClientID %>').val(''); 
     $('#<%=ContactPhoneBox.ClientID %>').val(''); 
     $('#<%=ReportMessageBox.ClientID %>').val(''); 
     $('#<%=AskQuestionProductBtn.ClientID %>').show(); 
     $('#contact-statuslbl').val(''); 
    } 

    jQuery.fn.center = function() { 
     this.css("position", "absolute"); 
     this.css("top", Math.max(0, (($(window).height() - this.outerHeight())/2) + 
      $(window).scrollTop()) + "px"); 
     this.css("left", Math.max(0, (($(window).width() - this.outerWidth())/2) + 
      $(window).scrollLeft()) + "px"); 
     return this; 
    }; 

    $(document).ready(function() { 
     var mouseIsInside = true; 

     $('#<%=ReportError.ClientID%>').hover(function() { 
      mouseIsInside = true; 
     }, function() { 
      mouseIsInside = false; 
     }); 

     $("body").mouseup(function() { 
      if (!mouseIsInside) { 
       disablePopup(); 
      } 
     }); 

    }); 

     $('#<%=bgPopup.ClientID %>').data("state", 0); 

     $('#<%=AddToBasketButton.ClientID %>').click(function() { 
      resetContactControls(); 
      centerPopup(); 
      loadPopup(); 
      setOrdering(); 
     }); 

     $('#<%=AskqlnkBtn.ClientID %>').click(function() { 
      resetContactControls(); 
      centerPopup(); 
      loadPopup(); 
      setQuestions(); 
     }); 

     $('#<%=PopupCloseLnk.ClientID %>').click(function() { 
      disablePopup(); 
     }); 

     $(document).keypress(function (e) { 
      if (e.keyCode == 27) { 
       disablePopup(); 
      } 
     }); 


    $(window).resize(function() { 
     centerPopup(); 
    }); 

Answer 1

문제는 당신이 요소를 배치하는 방법에 의해 발생되고있다. 고정되어 있어야하는 것처럼 당신은 그것을 일종의 위치에 놓고 있습니다. 이것을 센터 코드로 사용해보십시오.

jQuery.fn.center = function() { 
    this.css("position", "fixed"); 
    this.css("top", Math.max(0, (($(window).height() - this.outerHeight())/2) + "px"); 
    this.css("left", Math.max(0, (($(window).width() - this.outerWidth())/2) + "px"); 
    return this; 
}; 

나는 position:fixed로 변경하고 scrollTop를 제거했습니다. 당신은 그것이 페이지와 함께 스크롤한다는 것을 의미하기 때문에 절대적으로 배치하는 것을 원하지 않습니다.

편집 : 당신은 아직도 무슨 일이 일어나고 있는지 참조하거나 top 및 left이 무엇인지 볼 수있는 기능이 추가 요소를 검사하기 위해 개발 도구를 사용하여 관련 스타일 중 하나를 작업하는데 문제가 발생하는 경우 다음과 같이 설정됩니다 :

alert(Math.max(0, (($(window).height() - this.outerHeight())/2) + "px"); 
alert(Math.max(0, (($(window).width() - this.outerWidth())/2) + "px");