как полностью удалить модальное окно начальной загрузки?


83

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

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


2
Вы используете jQuery или что-то подобное? Мог бы сделать $(modal_selector).remove().
robbrit 01

Спасибо, позвольте мне проверить, работает это или нет.
Akki

спасибо, он работает, но когда мы rev = invoke, не вызывается modal.show () .. тогда как его повторно вызвать?
Akki

Да remove, действительно удалит модальное окно, поэтому его нельзя будет снова открыть. Модальные окна Twitter Bootstrap на самом деле не являются чем-то волшебным, поэтому, когда вы повторно открываете модальное диалоговое окно, вам нужно вручную сбросить все элементы формы (это был мой опыт).
robbrit 01

Это зависит от того, что вы показываете в модальном окне. Twitter Bootstrap обрабатывает только отображение модального окна, ответственность за все, что в нем есть.
robbrit 01

Ответы:


122

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

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

8
Как и любые другие ответы, это, похоже, не удаляет фон.
htulipe 04

1
@htulipe Подход правильный, но он не будет работать с эффектами перехода в модальном окне. Вам нужно будет удалить класс .fade из модального окна, чтобы он заработал.
drillingman

4
@drillingman: +1, который сработал для меня:$("#mimodal").removeClass('fade').modal('hide')
John Gietzen

5
Единственное, что у меня сработало в BS3, было:$(this).html("");
Райан Каррах

1
Как именно удалить его полностью? @Loenix
AlexioVay

41

ПРИМЕЧАНИЕ. Это решение работает только для Bootstrap до версии 3. Чтобы получить ответ Bootstrap 3, обратитесь к этому пользователю user2612497 .

Что вы хотите сделать:

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

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

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

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

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

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


5
На самом деле это работает, но немного по-другому. $("#modalElement").removeData("modal"); Я использую Bootstrap 2.3.1 и jQuery 1.9.1
tlavarea

5
Если вы используете Bootstrap 3, вы должны прослушивать hidden.bs.modalвместо hiddenсобытия. getbootstrap.com/javascript/#modals
Ромен Паулюс

19

Для версии 3.x

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

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

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

Использование ручных шагов - рискованный подход, так как код Bootstrap может быть изменен, и вы можете пропустить некоторые аспекты. Например, по крайней мере, в Bootstrap 3.2 style="padding-right: 17px;"также будет установлено bodyзначение для скрытой полосы прокрутки. Итог: используйте Bootstraps API, который в v3 был бы $('.modal').modal('hide').data('bs.modal', null);.
Оливер

Ага, ты прав. Это было написано для версии 2.x. Обновлено.
zelibobla

если вы динамически вводите данные в модальное окно и удаляете всю вторую часть своего ответа, он удалит гораздо больше, чем необходимо. Помимо повторного использования модального. Если это поможет, я предлагаю использовать ваш конкретный class.remove ();
alphapilgrim

13

Таким образом вы можете полностью уничтожить модальное окно без перезагрузки страницы.

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

но он полностью удалит модальное окно с вашей html-страницы. После этого модальное скрытие не будет работать.


.remove () удаляет его полностью. И .show () больше не работает. Что мне снова инициализировать?
geeky_monster

Поскольку при создании модального окна начальной загрузки внесение изменений в bodyпредлагаемое решение не приведет к откату всех изменений.
zelibobla

2
Это не сработает, потому что фон будет зависать, почему за него вообще проголосовали?
codenamezero

5

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

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

На моей стороне это работает отлично. Версия BS> 3


Это оставляет серый фон, оставляя веб-страницу непригодной для использования !!
Biju

4

Мощь jQuery. $(selector).modal('hide').destroy();сначала удалит синды, у вас может быть эффект скольжения, а затем полностью удалит элемент, однако, если вы хотите, чтобы пользователь мог снова открыть модальное окно после того, как вы закончили шаги. вы можете просто обновить только те настройки, которые вы хотите сбросить, поэтому для сброса всех входов в вашем модальном окне это будет выглядеть следующим образом:

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

3

Насколько я понимаю, вы не хотите его ни удалять, ни скрывать? Потому что вы, возможно, захотите повторно использовать его позже ... но не хотите, чтобы он содержал старый контент, если вы когда-нибудь откроете его снова?

<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

бутстрап 3 + jquery 2.0.3:

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

1
Поскольку при создании модального окна начальной загрузки внесение изменений в bodyпредлагаемое решение не приведет к откату всех изменений.
zelibobla

3

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

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

это тот, который мне помог;) так что мне не нужен был api, чтобы остановить это
Алекса Адриан

2

Мой подход заключался бы в использовании 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);
});

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

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



1

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

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

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

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

Хотя этот код на самом деле может быть решением проблемы, обычно рекомендуется включать объяснение того, что он делает, когда вы отвечаете на вопрос.
Себастьян Ленартович

Хорошо. Я торопился ... все равно добавить ".remove ();" для удаления всей ссылки и html-кода вашего модального загрузочного окна.
Лука Ди Ленардо

1

Это полностью удаляет модальное окно из DOM, работает и с «добавленными» модальными окнами.

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

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

e.preventDefault();

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

});

После этого можно ли повторно инициализировать модальное окно?
rahim.nagori

@ rahim.nagori, как он пишет в описании, удаляет модальное окно из DOM, вы можете повторно добавить его ... не закрывает модальное окно, удаляет его, тред полностью уничтожает модальное окно.
Алин Разван

1

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

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

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


1
Это оставляет серый фон, оставляя веб-страницу непригодной для использования !!
Biju

1

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

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

Это избавляет от модального окна, но оставляет серый фон, что делает веб-страницу непригодной для использования
Биджу

В какой версии бутстрапа вы пробовали?
Cristian Ghirba

0

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

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

1
Live устарел, его нужно заменить на on, а [0] в элементе, на который вы нацеливаетесь, не требуется, если вы используете jQuery. Кроме того, если вы удалите фон полностью, обратите внимание, что вам, возможно, придется добавить его обратно ... Попробуйте: $(document).on('hidden.bs.modal', '.modal', function(e) { if ($('.modal-backdrop').length) { $('.modal-backdrop').remove(); } });
Thomas Bennett

0

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


0

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

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

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


0

Работает для 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();
});

0

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

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

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


Это оставляет серый фон, оставляя веб-страницу непригодной для использования !!
Biju


-1

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

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

-4

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

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

Проголосовали против, потому что он просто скрывает модальное окно, о котором явно не спрашивали.
AlexioVay
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.