Я использовал модальное окно для реализации мастера, который имеет около 4,5 шагов. Мне нужно полностью уничтожить его после последнего шага (onFinish) и шага OnCancel без обновления страницы . Я, конечно, могу скрыть это, но скрытие модальных окон восстанавливает все как таковое, когда я открываю его снова. Может ли кто-нибудь помочь мне в этом вопросе?

Спасибо. Любые подсказки, ответы полезны для меня.

если это bootstrap 3, вы можете использовать:

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

ПРИМЕЧАНИЕ. Это решение работает только для Bootstrap до версии 3. Чтобы получить ответ 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();сначала удалит синды, у вас может быть эффект скольжения, а затем полностью удалит элемент, однако, если вы хотите, чтобы пользователь мог снова открыть модальное окно после того, как вы закончили шаги. вы можете просто обновить только те настройки, которые вы хотите сбросить, поэтому для сброса всех входов в вашем модальном окне это будет выглядеть следующим образом:

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

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

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

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

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

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

$("#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 - это идентификатор моего модального окна.

$(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.

Также работает с bootstrap 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('');
});

Безопасно заставить селекторы сделать их пустыми, поскольку причиной этой проблемы может быть версия bootstrap и 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');