Я використав модальне вікно для реалізації майстра, яке має близько 4,5 кроків. Мені потрібно повністю його знищити після останнього кроку (onFinish) та OnCancel, не оновлюючи сторінку . Звичайно, я можу це приховати, але приховування модальних вікон відновлює все як таке, коли я відкриваю його знову. Хтось може мені допомогти з цього питання?

Дякую Будь-які підказки відповіді корисні для мене.

якщо це bootstrap 3, ви можете використовувати:

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

ПРИМІТКА. Це рішення працює лише для Bootstrap до версії 3. Для відповіді на Bootstrap 3 зверніться до цього користувача 2612497 .

Що ви хочете зробити, це:

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

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

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

bootstrap 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();

У мене був той самий сценарій, коли я натиснув кнопку, щоб відкрити новий модаль. Закінчивши, я хочу повністю видалити його зі своєї сторінки ... Я використовую видалення для видалення модального .. При натисканні кнопки я перевіряю, чи існує модальний, і якщо це так, я знищу його і створюю новий модальний ..

$("#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('');
});

Безпечно змушувати селектори робити їх порожніми, оскільки версія цієї програми для завантаження та jquery може бути причиною цієї проблеми

Однорядкове повне видалення приховування (ES6)

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

З інтерфейсом користувальницького інтерфейсу це можливо для вас. Він перезавантажує контролер зблизька, щоб повторно ініціалізувати модальний вміст перед його спрацьовуванням наступного разу.

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

Я не знаю, як це може звучати, але це працює для мене ...........

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