아약스를 통해로드 된 div와 같은 모달에 콘텐츠를 추가하는 방법

Question

미리보기 이미지 갤러리가있는 페이지가 있습니다. 하나를 클릭하면 더 큰 이미지를 표시하고 모달과 같은 방식으로 사진에 대한 자세한 정보를 표시하고 싶습니다. has been done here 이미지를 클릭하면 의미를 볼 수 있습니다. 컨텐츠는 ajax를 통해로드됩니다. 사용자가 미리보기 이미지를 클릭 할 때 추가 정보가로드되기를 기다릴 때 더 큰 이미지를 볼 수 있도록 큰 이미지를 미리로드하고 싶습니다. 저는 모달을 처음 사용하기 때문에 어떻게 이것을 할 수 있습니까?

Answer 1

ajax를 통해 동적으로로드되는 내용은 단순히 dom (또는 모달 대화 상자를 표시하는 div/container)에 추가하는 것입니다. 아약스 요청이 도착하면 추가하여 사실상 새 콘텐츠를 반영하도록 모달 대화 상자의 모양을 새로 고칩니다.

나는 "ajax를 지원합니다"라는 모달 대화 상자를 찾을 수 없을 것이라고 생각합니다. 오히려 렌더링하기 전에 또는 다이얼로그가 열려있을 때 Ajax 호출을 생성 할 수 있도록 이벤트를 발생시키는 것을 찾고 있습니다. jQuery UI 모달 대화 상자는이 기능을 지원합니다.

$(".selector").dialog({       //open the dialog 
     open: function(event, ui) {    //fire function before rendering 
      $.ajax({         //make your ajax call to get content 
       url: "test.html",     
       type: "POST", 
       data: "name=value&name=value", 
       success: function(html){ 
        $(this).append(html);   //append your content to the dialog 
       } 
      }); 
     } 
    });