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

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

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

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

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

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

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

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

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

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

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

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

3.x 버전의 경우

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

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

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

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

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

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

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

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

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

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

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

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

<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})

부트 스트랩 3 + jquery 2.0.3 :

$('#myModal').on('hide.bs.modal', function () {
   $('#myModal').removeData();
})

모달에 iframe이있는 경우 다음 코드로 해당 콘텐츠를 제거 할 수 있습니다.

$('#myModal').on('hidden.bs.modal', function(){
   $(this).find('iframe').html("");
   $(this).find('iframe').attr("src", "");
});

내 접근 clone()방식은 jQuery 의 방법 을 사용하는 것입니다. 그것은 당신의 요소의 사본을 생성하고 당신이 원하는 것입니다 : 당신이 원하는대로 바꿀 수있는 첫 번째 변경되지 않은 모달의 사본 : 데모 (jsfiddle)

var myBackup = $('#myModal').clone();

// Delegated events because we make a copy, and the copied button does not exist onDomReady
$('body').on('click','#myReset',function() {
    $('#myModal').modal('hide').remove();
    var myClone = myBackup.clone();
    $('body').append(myClone);
});

내가 사용한 마크 업은 가장 기본적인 것이므로 올바른 요소 / 이벤트에 바인딩하기 만하면되고 마법사를 재설정해야합니다.

주의 와 결합에 위임 이벤트 모달의 내부 요소 각각의 리셋에서, 또는 리 바인드 그 같은 방식으로 행동하라 각각의 새로운 모달.

이것이 내 해결책입니다.

this.$el.modal().off();

버튼 클릭으로 새 모달을 여는 동일한 시나리오가있었습니다. 완료되면 내 페이지에서 완전히 제거하고 싶습니다 ... remove를 사용하여 모달을 삭제합니다 .. 버튼을 클릭하면 모달이 있는지 확인하고 true이면 제거하고 새 모달을 만듭니다.

$("#wizard").click(function() {
    /* find if wizard is already open */
    if($('.wizard-modal').length) {
        $('.wizard-modal').remove();
    }
});

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

//Just add .remove(); 
//Bootstrap v3.0.3

이것은 DOM에서 모달을 완전히 제거하고 "추가 된"모달에서도 작동합니다.

#pickoptionmodal은 내 모달 창의 ID입니다.

$(document).on('hidden.bs.modal','#pickoptionmodal',function(e){

e.preventDefault();

$("#pickoptionmodal").remove();

});

버튼 클릭으로 닫은 직후에 모달을 파괴해야해서 다음과 같이 생각했습니다.

$("#closeModal").click(function() {
    $("#modal").modal('hide').on('hidden.bs.modal', function () {
        $("#modal").remove();
    });
});

이것은 Bootstrap 3에서 작동합니다.

부트 스트랩 4.x에서도 작동합니다.

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

모달 섀도우가 더 어둡고 하나 이상의 모달을 표시하지 않으면 도움이 될 것입니다.

$('.modal').live('hide',function(){
    if($('.modal-backdrop').length>1){
        $('.modal-backdrop')[0].remove();
    }
});

다른 링크 클릭에 대해 동일한 모달을 사용해야했습니다. 방금 숨겨진 콜백에서 html 내용을 모달의 빈 ""으로 바꿨습니다.

이것은 나를 위해 일했습니다.

$('.modal-backdrop').removeClass('in');
$('#myDiv').removeClass('in');

대화 상자와 배경이 사라졌지 만 다음에 버튼을 클릭했을 때 다시 돌아 왔습니다.

Bootstrap v3.3.6에서 작동합니다.

$('#dialog').modal()
.on('hide.bs.modal', function () {
    // Some Code
}).on('shown.bs.modal', function () {
    // Some Code
}).on('hidden.bs.modal', function () {
    $("#dialog").off();
});

이것은 나에게만 효과가 있었다

$('body').on('hidden.bs.modal', '.modal', function() {
    $('selector').val('');
});

부트 스트랩 및 jquery 버전이이 문제의 원인 일 수 있으므로 선택기를 비워 두는 것이 안전합니다.

숨기기에서 한 줄 전체 제거 (ES6)

$("#myModal").on('hidden.bs.modal', (e)=>e.currentTarget.remove());

ui-router를 사용하면 옵션이 될 수 있습니다. 닫을 때 컨트롤러를 다시로드하므로 다음 번에 실행되기 전에 모달 콘텐츠를 다시 초기화합니다.

$("#myModalId").on('hidden.bs.modal', function () {
  $state.reload();  //resets the modal
});

이게 어떻게 들릴지 모르겠지만이게 저에게 효과가 있습니다 ...........

$("#YourModalID").modal('hide');