Ajax를 사용하여 트위터 부트 스트랩을 사용하여 모달 창을로드/언로드

부트 스트랩 (버전 2.3.1)을 사용 중이며 Ajax를 사용하여 모달 창을로드하고 있습니다. 모달 창을 닫을 때 DOM에서 모달 창을 제거하는 방법이 있습니까?Ajax를 사용하여 트위터 부트 스트랩을 사용하여 모달 창을로드/언로드

$('[data-toggle="modal"]').click(function(e) { 
     e.preventDefault(); 
     var url = $(this).attr('href'); 

     if (url.indexOf('#') == 0) { 
     $(url).modal('open'); 
     } else { 
      $.get(url, function(data) { 
       $(data).modal(); 
      }).success(function() { 
       console.log('success'); 

       // I tried this below but didn't work 
       // $('#modalClose).on('click',function(){ 
       // $('#myModalWindow').remove(); 
       // }); 
      }); 
     } 
    });

내 버튼 : 내 모달 창에서

<a href="path/to/modal.html" data-target="#" data-toggle="modal">Launch modal</a>

, 나는 닫기 버튼이있다.

<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>

그러나 모달을 닫으면 HTML이 DOM에 남아 있으며 모달을 다시로드하면 HTML이 다시 출력됩니다. 모달 창을 닫을 때 DOM에서 모달 창을 제거하는 방법이 있습니까?

출처

2013-04-24 cusejuice

문제점의 해결책을 찾으셨습니까? – MattSull

는 .remove()를 사용하여 매우 간단해야합니다

이

<button id="ModalClose" class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 

$('#ModalClose').on('click',function(){ 
    $('#IdOfModal').remove(); 
});

이것은 DOM에서 전체 모달 HTML을 제거해야합니다. 닫기 버튼에 ID를 부여하고 해당 ID를 클릭 참조로 사용합니다.

모달 (따라서 닫는 버튼)이 AJAX를 통해로드되는 경우, 동적으로로드 된 요소는 해당 모달로드에 대한 콜백 함수에 적용될 경우에만 Javascript/jQuery 작업을 수행 할 수 있습니다.

출처

2013-04-24 16:09:48 PlantTheIdea

시도했지만 #ModalClose를 클릭해도 아무런 변화가 없습니다. 나는 심지어 console.log ('close modal')를 클릭 기능에 넣으려고했지만 행운이 없었다. – cusejuice

모달은 AJAX를 통해로드되어 있습니까? 그렇다면이 논리를 콜백 함수에 적용해야하기 때문입니다. 이것을 반영하기 위해 답변이 수정되었습니다. – PlantTheIdea

당신은 명확히 할 수 있습니까? close 함수를 'success'콜백에 두는 것을 의미합니까? 그렇다면 노력했지만 작동하지 않습니다. 내가 한 일을보기 위해 편집을 참조하십시오. – cusejuice

부트 스트랩 모달과 관련된 추가 CSS 클래스를 제거해야합니다.

성공이 퍼팅보십시오 :

btn-close-modal

$('body').on('click', '#btn-close-modal', function() { 
    $('#my-modal').modal('hide'); 
    $('body').removeClass('modal-open'); 
    $('.modal-backdrop').remove(); 
});

는 모달을 제거하기 위해 사용 my-modal 문제의 모달의 이름 일부 버튼입니다.

출처

2013-04-24 18:55:16 MattSull

Ajax를 사용하여 트위터 부트 스트랩을 사용하여 모달 창을로드/언로드

답변

관련 문제