Я использовал modal window для реализации мастера, который имеет около 4,5 шагов. Мне нужно полностью уничтожить его после последнего шага (onFinish) и OnCancel без обновления страницы. Я могу, конечно, скрыть это, но скрытие модальных окон восстанавливает все как таковое, когда я снова открываю его. Может ли кто-нибудь помочь мне в этом вопросе?
Спасибо Любые подсказки помогают мне.
if 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 ищет свой экземпляр, который будет находиться в атрибуте data, если экземпляр существует, он просто переключает его, если экземпляр не существует, он создаст новый.
Надеюсь, что это поможет.
Для версии 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">×</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(); сначала удалит sinds, у вас может возникнуть скользящее действие, а затем полностью удалит элемент, однако, если вы хотите, чтобы пользователь снова смог открыть модально после завершения шагов. вы можете просто обновить только те настройки, которые вы хотите сбросить, так что для переиздания всех входов в вашем модале это выглядело бы так:
$(selector).find('input, textarea').each(function(){
$(this).val('');
});
Если у вас есть iframe в вашем модальном, вы можете удалить его содержимое по следующему коду:
$('#myModal').on('hidden.bs.modal', function(){
$(this).find('iframe').html("");
$(this).find('iframe').attr("src", "");
});
bootstrap 3 + jquery 2.0.3:
$('#myModal').on('hide.bs.modal', function () {
$('#myModal').removeData();
})
Это мое решение:
this.$el.modal().off();
Я пытался принять принятый ответ, но, похоже, он не работает с моей стороны, и я не знаю, как принятый ответ предполагает работу.
$('#modalId').on('hidden.bs.modal', function () {
$(this).remove();
})
Это прекрасно работает на моей стороне. Версия BS> 3
Мой подход заключается в использовании метода 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);
});
Используемая разметка является самой простой, поэтому вам нужно просто привязать нужные элементы/события, и у вас должен быть свой мастер reset.
Будьте осторожны, чтобы связать с делегированные события или перепроверить в каждом reset внутренние элементы вашего модального так что каждый новый модаль ведет себя одинаково.
У меня был такой же сценарий, когда я открывал новый модальный щелчок на кнопке. После того, как это сделано, я хочу полностью удалить его с моей страницы... Я использую 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
Также работает на начальной загрузке 4.x
$('#modal_ID').modal( 'hide' ).data( 'bs.modal', null );
Если модальная тень остается темнее и не будет отображаться более одного модального, тогда это будет полезно
$('.modal').live('hide',function(){
if($('.modal-backdrop').length>1){
$('.modal-backdrop')[0].remove();
}
});
Мне пришлось использовать такой же способ для разных кликов ссылок. Я просто заменил содержимое html пустым "" модальным в скрытом обратном вызове.
только это сработало для меня
$('body').on('hidden.bs.modal', '.modal', function() {
$('selector').val('');
});
Безопасно форсировать селектора, чтобы сделать их пустыми, так как в результате этой проблемы может возникнуть проблема с загрузкой и версией jquery.
Это сработало для меня.
$('.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();
});
Это лучшее решение, которое я нашел:
/**
* 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();
}
};
Это полностью удаляет модальный из DOM, работает и для "добавленных" модалов.
$(document).on('hidden.bs.modal','#pickoptionmodal',function(e){
e.preventDefault();
$("#pickoptionmodal").remove();
});
Полное удаление одной строки на шкуре (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.
Я не знаю, как это может звучать, но эта работа для меня...........
$("#YourModalID").modal('hide');