Примечание: это решение работает только для Bootstrap до версии 3. Ответ на Bootstrap 3 см. В разделе это один по user2612497.

что вы хотите сделать, это:

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

это заставит модальный инициализировать себя каждый раз, когда он отображается. Поэтому, если вы используете удаленный контент для загрузки в div или что-то еще, он будет повторно делать это каждый раз, когда он открывается. Вы просто разрушаете модальный экземпляр после каждого раза, когда он есть скрытый.

или всякий раз, когда вы хотите, чтобы вызвать уничтожение элемента (в случае, если это на самом деле не каждый раз, когда вы скрываете его) вы просто должны вызвать среднюю линию:

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

Twitter bootstrap ищет свой экземпляр, который будет расположен в атрибуте данных, если экземпляр существует, он просто переключает его, если экземпляр не существует, он создаст новый.

надеюсь, что это поможет.

для 3.X версии

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

для 2.x версия (рискованно; читать комментарии ниже) При создании bootstrap модальные три элемента на Вашей странице изменяются. Поэтому, если вы хотите полностью откатить все изменения, вы должны сделать это вручную для каждого из них.

$( '.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(); сначала удалит синды у вас может быть скользящий эффект, а затем полностью удаляет элемент, однако если вы хотите, чтобы пользователь мог снова открыть модальный после завершения шагов. вы можете просто обновить только те настройки, которые вы хотите сбросить, поэтому для сброса всех входов в вашем модальном режиме это будет выглядеть следующим образом:

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

Если у вас есть iframe в модальном, вы можете удалить его содержимое на следующий код:

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

Это мое решение:

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

мой подход будет использовать clone() метод jQuery. Он создает копию вашего элемента, и это то, что вы хотите : копия вашего первого неизмененного модального, который вы можете заменить по своему желанию : Demo (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);
});

разметка, которую я использовал, является самой простой, поэтому вам просто нужно привязать правильные элементы / события, и вы должны сбросить свой мастер.

будьте осторожны связывать с делегирован события, или rebind при каждом сбросе внутренних элементов вашего модального, чтобы каждый новый модальный вел себя одинаково.

bootstrap 3 + jquery 2.0.3:

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

У меня был такой же сценарий, когда я открывал новый модальный при нажатии кнопки. После этого я хочу полностью удалить его с моей страницы... Я использую 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

Я пробовал принятый ответ, но он, похоже, не работает на моем конце, и я не знаю, как принятый ответ должен работать.

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

Это прекрасно работает на моей стороне. Версия BS > 3

также работает на bootstrap 4.x

$('#modal_ID').модальный ('скрыть').данных (далее-БС.modal', null );

Если модальная тень остается темнее и не собирается показывать более одного модального, то это будет полезно

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

Мне пришлось использовать один и тот же модальный для разных кликов по ссылкам. Я просто заменил содержимое html пустым "" модального в скрытом обратном вызове.

это сработало для меня.

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

диалог и фон исчезли, но они вернулись в следующий раз, когда я нажал кнопку.

это работает на начальной загрузки В3.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('');
});

безопасно заставлять селекторы делать их пустыми, так как версия bootstrap и jquery может быть причиной этой проблемы

это полностью удаляет модальное из DOM, работает и для "добавленных" модалов .

#pickoptionmodal-это идентификатор моего модального окна.

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

e.preventDefault();

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

});

однострочное полное удаление на hide (ES6 )

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

С ui-router это может быть вариант для вас. Он перезагружает контроллер при закрытии, поэтому повторно инициализирует модальное содержимое перед его запуском в следующий раз.

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

Я должен уничтожить модальный сразу после его закрытия с помощью нажатия кнопки, и поэтому я придумал следующее.

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

обратите внимание, что это работает с Bootstrap 3.

Это лучшее решение я нашел:

/**
 * Stop an iframe or HTML5 <video> from playing
 * @param  {Element} element The element that contains the video
 */
var stopVideo = function ( element ) {
    var iframe = element.querySelector( 'iframe');
    var video = element.querySelector( 'video' );
    if ( iframe ) {
        var iframeSrc = iframe.src;
        iframe.src = iframeSrc;
    }
    if ( video ) {
        video.pause();
    }
};

владелец:https://gist.github.com/cferdinandi/9044694

Я не знаю, как это может звучать, но это работает для меня...........

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