[twitter-bootstrap] 부트 스트랩 모달 창을 완전히 파괴하는 방법은 무엇입니까?

Question 1

내가 사용했습니다 모달 창을 약 4,5 단계가 마법사 구현. 페이지를 새로 고치지 않고 마지막 단계 (onFinish) 및 OnCancel 단계 후에 완전히 삭제해야합니다 . 물론 숨길 수는 있지만 모달 창을 숨기면 다시 열면 모든 것이 복원됩니다. 누구든지이 문제에 대해 나를 도울 수 있습니까?

감사합니다 모든 힌트 답변이 도움이됩니다.

Question 2

부트 스트랩 3이면 다음을 사용할 수 있습니다.

$("#mimodal").on('hidden.bs.modal', function () {
    $(this).data('bs.modal', null);
});

Question 3

참고 :이 솔루션은 버전 3 이전의 Bootstrap에서만 작동합니다. Bootstrap 3 답변 은 user2612497의 답변을 참조하십시오 .

원하는 것은 다음과 같습니다.

$('#modalElement').on('hidden', function(){
    $(this).data('modal', null);
});

그러면 모달이 표시 될 때마다 자체적으로 초기화됩니다. 따라서 원격 콘텐츠를 사용하여 div 등으로로드하는 경우 열릴 때마다 다시 수행됩니다. 숨길 때마다 모달 인스턴스를 파괴하는 것입니다.

또는 요소의 파괴를 트리거 할 때마다 (실제로 숨길 때마다 그렇지 않은 경우) 중간 줄을 호출하면됩니다.

$('#modalElement').data('modal', null);

Twitter 부트 스트랩은 인스턴스가 데이터 속성에 위치 할 인스턴스를 찾고, 인스턴스가 있으면 토글하고, 인스턴스가 없으면 새 인스턴스를 만듭니다.

도움이 되었기를 바랍니다.

Question 4

3.x 버전의 경우

$( '.modal' ).modal( 'hide' ).data( 'bs.modal', null );

2.x 버전의 경우 (위험, 아래 주석 참조) 변경되는 페이지에서 부트 스트랩 모달 세 요소를 만들 때. 따라서 모든 변경 사항을 완전히 롤백하려면 각각에 대해 수동으로 수행해야합니다.

$( '.modal' ).remove();
$( '.modal-backdrop' ).remove();
$( 'body' ).removeClass( "modal-open" );

Question 5

이렇게하면 페이지를 다시로드하지 않고도 모달을 완전히 파괴 할 수 있습니다.

$("#modal").remove();
$('.modal-backdrop').remove();

그러나 HTML 페이지에서 모달을 완전히 제거합니다. 이 모달 숨기기 쇼 후에는 작동하지 않습니다.

Question 6

나는 수락 된 대답을 시도했지만 내 쪽에서 작동하지 않는 것 같고 수락 된 대답이 어떻게 작동하는지 모르겠습니다.

$('#modalId').on('hidden.bs.modal', function () {
  $(this).remove();
})

이것은 내 편에서 완벽하게 잘 작동합니다. BS 버전> 3

Question 7

jQuery의 힘. $(selector).modal('hide').destroy();먼저 슬라이딩 효과가있을 수있는 sind를 제거한 다음 요소를 완전히 제거하지만 단계를 완료 한 후 사용자가 모달을 다시 열 수 있도록하려면. 모달의 모든 입력을 재설정하려면 다음과 같이 재설정하려는 설정 만 업데이트하고 싶을 수도 있습니다.

$(selector).find('input, textarea').each(function(){
   $(this).val('');
});

Question 8

내가 이해 한 바에서 제거하거나 숨기고 싶지 않습니까? 나중에 다시 사용하고 싶을 수 있기 때문에 ..하지만 다시 열면 이전 콘텐츠를 원하지 않습니까?

<div class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

동적 템플릿으로 사용하려면 다음과 같이하십시오.

$(selector).modal({show: true})

....

$(selector).modal({show: false})
$(".modal-body").empty()

....

$(".modal-body").append("new stuff & text")
$(selector).modal({show: true})