모달 콘텐츠가 변경되어 모달을 다시 센터링하지 않습니다.

저는 현재 문제를 설명하기 위해 다음 plunkr을 만들었습니다. (iframe 내용을로드 할 수 있지만 문제가되지 않습니다.) 단추를 클릭 한 후 동적으로 iframe 원본을 자바 스크립트 설정, iframe 내용을로드하기 전에로드 표시기를 표시하려면하지만 때 iframe 완료되면 모달은 다시 센터링하지 않고 페이지의 가장 자리에서 벗어납니다.모달 콘텐츠가 변경되어 모달을 다시 센터링하지 않습니다.

$ ('# exampleModal1')을 사용해 보았지만 재단 5 (Foundation 5)라고 말했지만 리플 로우 태그는 이제 사라졌습니다.

저는 Foundation.reInit ($ ('# exampleModal1'))을 시도했지만 아무 것도하지 않고 닫는 버튼과 esc를 클릭하여 모달을 닫으면 작동하지 않습니다.

http://plnkr.co/edit/QgkDSz0MdAcIHLJ10LVC?p=info

<html> 
    <head> 
    <link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/6.1.2/foundation.min.css"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script src="//cdn.jsdelivr.net/foundation/6.1.2/foundation.min.js"></script> 
    </head> 

    <body> 
    <h1>Foundation Reveal XHR Resize!</h1> 
    <button class="button">Click to Reveal</button> 
    <div class="reveal" id="exampleModal1"> 
     <div id="loading">Loading...</div> 
     <iframe id="iframeExample" style="display:none"></iframe> 
    </div> 

    <script> 
     $(document).foundation(); 
     var modal = $('#exampleModal1'); 
     var reveal = new Foundation.Reveal(modal); 
     $('button').click(function(){ 
      reveal.open(); 
      $('#iframeExample').attr('src', "https://www.google.com") 
     }); 

     document.getElementById('iframeExample').onload = function() { 
     $('#loading').css("display","none"); 
     $('#iframeExample').css("display","block").css("height","1000px"); 
     } 
    </script> 
    </body> 
</html>

출처

2016-09-22 theB3RV

어쩌면 그냥 iframe을로드 한 후 이벤트의 크기를 조절 창을 트리거 : 나는 iframe이 부하에 시간 제한을 추가 한

$('#iframeExample').load(function() { 
    $(window).trigger('resize'); 
});

Demo

주 더 잘 보여주기 위해서.

출처

2016-09-22 18:38:52 isherwood

모달 콘텐츠가 변경되어 모달을 다시 센터링하지 않습니다.

답변

관련 문제