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

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

---

내가 사용했습니다 모달 창을 약 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 페이지에서 모달을 완전히 제거합니다. 이 모달 숨기기 쇼 이후에는 작동하지 않습니다.

---

내가 이해하는 바에 따르면 제거하거나 숨기고 싶지 않습니까? 나중에 다시 사용하고 싶을 수도 있지만 .. 다시 열면 이전 콘텐츠가 포함되지 않기를 원하십니까?

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

---

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

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

---

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

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

---

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

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

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

---

내 접근 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);
});

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

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

---

bootstrap 3 + jquery 2.0.3:

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

---

This is my solution:

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

---

I have to destroy the modal right after it is closed through a button click, and so I came up with the following.

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

Note that this works with Bootstrap 3.

---

Also works on bootstrap 4.x

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

---

I had a same scenario where I would open a new modal on a button click. Once done, I want to completely remove it from my page... I use remove to delete the modal.. On button click I would check if modal exists , and if true I would destroy it and create a new modal ..

$("#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

---

If modal shadow remains darker and not going for showing more than one modal then this will be helpful

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

---

I had to use same modal for different link clicks. I just replaced the html content with empty "" of the modal in hidden callback.

---

This worked for me.

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

The dialog and backdrop went away, but they came back the next time I clicked the button.

---

It works for 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();
});

---

only this worked for me

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

It is safe forcing selectors to make them blank since bootstrap and jquery version may be the reason of this problem

---

This completely removes the modal from the DOM , is working for the "appended" modals as well .

#pickoptionmodal is the id of my modal window.

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

e.preventDefault();

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

});

---

Single line complete removal on hide ( ES6 )

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

---

With ui-router this may be an option for you. It reloads the controller on close so reinitializes the modal contents before it fires next time.

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

---

I don't know how this may sound but this work for me...........

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

참고URL : https://stackoverflow.com/questions/13177426/how-to-destroy-bootstrap-modal-window-completely