자바 스크립트 모달 팝업에 CSS 속성을 업데이트하지

Question

나는 다음과 같은 자바 스크립트 코드가 있습니다 그것은 웹 페이지의 파일 이름에 소요 모달의 내용을 표시, 본질적으로

<script type="text/javascript"> 
    function doPopup(file){ 
    var dlg=$('#popup').dialog({ 
     resizable: false, 
     autoOpen: false, 
     modal: true, 
     hide: 'fade', 
     position: ['center', 'center'] 
    }); 

    dlg.load(file, function(){ 
     dlg.dialog('open'); 
    }); 

    var maskHeight = $(document).height(); 
    var maskWidth = $(window).width(); 
    $('#mask').css({'width':maskWidth, 'height':maskHeight}); 
    $('#mask').fadeTo("slow", 0.85); 

    dlg.parent().css('z-index', 9001); 
    dlg.parent().css('position', 'absolute'); 
    //alert('I'm an alert'); 

    if(file.indexOf("CustomerCouponDisplay.asp" !== -1)) { 
     var imgWidth = $('#couponImg').width(); 
     var winW = $(window).width(); 
     dlg.parent().css('left', (winW - imgWidth)/2); 
    } 
    } 
</script> 

,이 함수를 호출 팝업.

코드를 그대로 실행하면 계획에 따라 일반적인 예상 동작이 발생합니다. 마스크 div가 화면을 차지하고 어두워지면서 화면이 어두워지고 팝업이 나타납니다.

문제 : 우리의 쿠폰 이미지는 팝업 div에 비해 너무 크기 때문에 거기에 if 문이있어서 화면의 팝업이 자동으로 다시 나타납니다. 그러나 코드가 실행 되더라도이 리 센터링은 발생하지 않습니다.

재미있는 부분 : 알림의 주석을 제거하면 이미지가 여전히 중심에서 벗어납니다. 확인을 클릭하여 알림을 닫으면 화면이 다시 그려지고 이미지가 원하는대로 가운데에 맞춰집니다.

팝업의 부모에 액세스하는 여러 가지 방법, css()에 인수를 제공하는 여러 가지 방법을 비롯하여 popup.parent.css 행을 여러 위치에 배치하고 'left' '값, 모든 것이로드되고 CSS가 업데이트 된 후에 만 ​​대화 상자를 여는 것 (이 하나가 모든 것을 망가 뜨 렸음) 및 작동하지 않는 다른 여러 가지가 있습니다.

내 생각 : CSS 스타일 중 일부가 업데이트되지 않는 이유는 "애니메이션이 너무 오래 걸린다"(또는 그와 비슷한 것)라는 이유 때문이었습니다. 나는 확실히 html을 대화 상자와 마스크 페이딩으로 재 작성하고 있는데, 어떻게 든 그것을 대신 할 수없는 '왼쪽'속성과 관련 될 수 있을까?

현재의 생각을 거부했습니다. '왼쪽'속성을 설정하기 전에 오른쪽 속성을 설정하려고 했으므로 필자는 그렇지 않습니다. 동일한 구성 요소에 대한 다른 속성을 성공적으로 설정했기 때문에 문제없이 적용됩니다. . 그것은 fadeTo 라인이있는 경우에, 나는 심지어 바닥으로 옮겼습니다. 같은 일이 일어났습니다. 경계가 끝날 때까지 중심에 있지 않았습니다.

생각하십니까?

편집 : 관련성이있는 부분에 대해서만이 작업이 ASP 페이지에서 실행됩니다. 이 아니라 .NET입니다.

Answer 1

단서는 경고입니다. 대화 상자가로드되고 열리기 전에 크기를 조정하려고하는 코드가 발생하고 있음을 보여줍니다.

대화 상자를 열기위한 이벤트 핸들러에 대화 상자를 조작하는 코드를 넣으십시오.

이

function doPopup(file){ 
    var dlg=$('#popup').dialog({ 
     resizable: false, 
     autoOpen: false, 
     modal: true, 
     hide: 'fade', 
     position: ['center', 'center'], 
     open: function() { 
     var dialogParent = $(this).parent(); 
     var maskHeight = $(document).height(); 
     var maskWidth = $(window).width(); 
     $('#mask').css({'width':maskWidth, 'height':maskHeight}); 
     $('#mask').fadeTo("slow", 0.85); 

     dialogParent.css('z-index', 9001); 
     dialogParent.css('position', 'absolute'); 

     if(file.indexOf("CustomerCouponDisplay.asp" !== -1)) { 
      var imgWidth = $('#couponImg').width(); 
      var winW = $(window).width(); 
      dialogParent.css('left', (winW - imgWidth)/2); 
     } 
     } 
    }); 

    dlg.load(file, function(){ 
     dlg.dialog('open'); 
    }); 

}