jQuery 모달 창이 내용을 "주입"할 때 센터링하지 않습니다.

Question

특정 스크립트에 문제가 있습니다. 구현하고자하는 간단한 모달 창 스크립트를 발견했습니다. 원래의 기능은 단순히 "static"컨텐트로 창 div를 숨기거나 표시한다는 것이 었습니다. 이것은 좋지만, 즉시 콘텐츠를 지정할 수있는 기능이 필요했습니다. 그래서 .load() 함수를 사용하여 div의 내용을 "삽입"한 다음 스크립트에서 창을 보통으로 표시하는 방식으로 변경했습니다. 그러나 모달이 닫히면 모델 창을 여는 데 사용 된 링크의 특성 값에 따라 다른 콘텐츠를 추가 할 수 있도록 .empty()을 사용하여 div의 내용을 비 웁니다. 난 그냥 DIV의 내용에 <embed> 코드를 하드 코딩하는 반대로 .load() 기능을 사용하는 경우 윈도우는 화면의 정 중앙에 있지 않습니다 제외

모든 것이 잘 작동합니다. <embed> 개체를 하드 코딩하면 잘 다듬어지고 멋지게 보입니다.

<embed> 개체가 바로 div에 삽입 된 경우 전체 창 높이/너비에 차이가있는 것은 분명합니다. 스크립트가 창 div의 전체 너비/높이를 찾기 전후에 .load() 위치 지정을 시도했지만 아무 것도 영향을 미치지 않습니다.

도움을 주시면 대단히 감사하겠습니다. 부하가 AJAX 요청을 트리거하고 내용을로드하기 전에 귀하의 중심 코드가 실행되고 있기 때문에입니다

$(document).ready(function() { 

    //select all the a tag with name equal to modal 
    $('a[name=modal]').click(function(e) { 
     //Cancel the link behavior 
     e.preventDefault(); 

     //Get the A tag 
     var id = $(this).attr('href'); 
     //Get source file for AJAX request 
     var source = $(this).attr('src'); 

     //If source is set, send ajax request, and then load content into window 
     if(source != undefined) { 
      $('.window').load(source); 
     } 

     //Get the screen height and width 
     var maskHeight = $(document).height(); 
     var maskWidth = $(window).width(); 

     //Set heigth and width to mask to fill up the whole screen 
     $('#mask').css({'width':maskWidth,'height':maskHeight}); 

     //transition effect  
     $('#mask').fadeIn(1000);  
     $('#mask').fadeTo("slow",0.8); 

     //Get the window height and width 
     var winH = $(window).height(); 
     var winW = $(window).width(); 

     //Set the popup window to center 
     $(id).css('top', winH/2-$(id).height()/2); 
     $(id).css('left', winW/2-$(id).width()/2); 

     //transition effect 
     $(id).fadeIn(2000); 

    }); 

    //if close button is clicked 
    $('.window .close').click(function (e) { 
     //Cancel the link behavior 
     e.preventDefault(); 

     $('#mask').fadeOut("slow"); 
     $('.window').fadeOut("slow", function() {  
      $(this).empty(); 
     }); 
    });  

    //if mask is clicked 
    $('#mask').click(function() { 
     $(this).fadeOut("slow"); 
     $('.window').fadeOut("slow", function() { 
      $(this).empty(); 
     }); 
    });   
}); 

Answer 1

:

여기 스크립트입니다. 당신이해야 할 일은 ajax complete 핸들러에 모달을 집중시키는 것입니다.

$('.window').load(source,null,function(){ functionThatCentersModal() });