jQuery 모달 내에서 외부 파일의 내용 표시

Question

simple modal과 함께 jQuery 모달의 작동 방식을 이해합니다. 이 모달 창에 (load에서) 온 외부 파일의 내용을 추가

var load = 'alert.html'; // THE PURPOSE OF THIS QUESTION IS TO CHANGE "alert.html" to "image.jpg" 
$(this).click(function(e) { 
    e.preventDefault(); 
    $('body').append('<div id="overlay" />'); 
    $('#overlay').fadeIn(300, function() { 
     $('body').append('<div id="alertModalOuter"><div id="alertModal"></div></div>'); 
     var outer = $('#alertModalOuter'); 
     var modal = $('#alertModal'); 
     var defWidth = outer.outerWidth(); 
     var defHeight = outer.outerHeight(); 
     modal.load(load + ' #alert', function() { 
      var alertBoxContent = $('#alert'); 
      var alertWidth = alertBoxContent.outerWidth(); 
      var alertHeight = alertBoxContent.outerHeight(); 
      var widthCombine = -((defWidth + alertWidth)/2); 
      var heightCombine = -((defHeight + alertHeight)/2); 
      modal.animate({width: alertWidth, height: alertHeight}, 200); 
      outer.animate({marginLeft: widthCombine, marginTop: heightCombine}, 200, function() { 
       alertBoxContent.fadeIn(200, function() { 
       }); 
      }); 
     }); 

이 과정; 하지만 이것은 id = "alert"태그 안의 내용에만 적용됩니다. 외부 파일의 전체 내용을 표시하는 "경고"역할을 제거하려면 어떻게해야합니까? 예를 들어, 외부 이미지 ("alert"태그 사이가 아닌 이미지 파일)를로드하려고합니다.

Answer 1

#alert selector를 지정하지 않아도 전체 페이지가로드됩니다. 선택기를 지정하지 않으면 .html() 호출을로드하고 모든 스크립트를 제거하기 전에 처리합니다. 예상치 못한 결과가 나오는 스크립트가 실행 중일 수 있습니다. The .load() docs