Я использую диалоговое окно "Модифицированный бутстрап". Когда я нажимаю кнопку отправки в модальном диалоге bootstrap, он отправляет запрос AJAX. Моя проблема в том, что модальный фон не исчезает. Диалоговое окно "Модальное" действительно исчезает правильно, но вместо этого "модальный фон в", который создает непрозрачность на экране, остается
Что я могу сделать?
Убедитесь, что вы не заменяете контейнер, содержащий фактическое модальное окно, когда вы выполняете запрос AJAX, потому что Bootstrap не сможет найти ссылку на него при попытке закрыть его. В вашем полном обработчике Ajax удалите модальный файл и затем замените данные.
Если это не сработает, вы всегда можете заставить его уйти, выполнив следующие действия:
$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
Убедитесь, что ваш первоначальный вызов $.modal(), чтобы применить модальное поведение, не передается в большее количество элементов, чем вы планировали. Если это произойдет, это приведет к созданию модального экземпляра в комплекте с элементом фона для элемента EACH в коллекции. Следовательно, это может выглядеть так, что задний фон остался позади, когда на самом деле вы смотрите на один из дубликатов.
В моем случае я пытался создать модальный контент "на лету" с некоторым кодом вроде этого:
myModal = $('<div class="modal">...lots of HTML content here...</div><!-- end modal -->');
$('body').append(myModal);
myModal.modal();
Здесь комментарий HTML после закрывающего тега </div> означал, что myModal на самом деле представляет собой коллекцию jQuery из двух элементов - div и комментарий. Оба они были послушно превращены в модалы, каждый со своим собственным элементом фона. Конечно, модальность, сделанная из комментария, была незаметна, кроме фона, поэтому, когда я закрыл настоящий модальный (div), он выглядел так, как будто фон был оставлен.
Я слишком долго занимался этой проблемой:)
В то время как другие предоставленные ответы являются полезными и действительными, мне показалось немного беспорядочным, чтобы эффективно воссоздать функциональные функции скрытия от Bootstrap, поэтому я нашел более чистое решение.
Проблема в том, что существует цепочка событий, которые происходят, когда вы вызываете
$("#myModal").modal('hide');
functionThatEndsUpDestroyingTheDOM()
Когда вы заменяете кучу HTML в результате запроса AJAX, модальные скрывающие события не заканчиваются. Однако Bootstrap запускает событие, когда все завершено, и вы можете подключиться к нему так:
$("#myModal").modal('hide').on('hidden.bs.modal', functionThatEndsUpDestroyingTheDOM);
Надеюсь, что это будет полезно!
Вставьте в свою кнопку действия следующее:
data-backdrop="false"
и
data-dismiss="modal"
Пример:
<button type="button" class="btn btn-default" data-dismiss="modal">Done</button>
<button type="button" class="btn btn-danger danger" data-dismiss="modal" data-backdrop="false">Action</button>
если вы введете этот data-attr, то .modal-backdrop не появится. документацию по этой ссылке: http://getbootstrap.com/javascript/#modals-usage
Если вы используете копию и вставляете с самого сайта getboostrap в селектор, созданный html, убедитесь, что вы удалили комментарий '<! -/.modal → '. Bootstrap запутывается и думает, что комментарий является вторым модальным элементом. Он создает другую обратную капли для этого "второго" элемента.
У меня была аналогичная проблема: в моем модальном окне у меня есть две кнопки: "Отмена" и "ОК" . Первоначально обе кнопки закрывали модальное окно, вызывая $('#myModal').modal('hide') (с "ОК" , ранее выполнявшим некоторый код), и сценарий был бы следующим:
ну, мой сосед следующий стол спас мой день: вместо вызова $('#myModal').modal('hide'), дайте вашим кнопкам атрибут data-dismiss="modal" и добавьте событие "click" к вашей кнопке "Отправить". В моей проблеме код HTML (ну, TWIG) для кнопки:
<button id="modal-btn-ok" class="btn" data-dismiss="modal">OK</button>
<button id="modal-btn-cancel" class="btn" data-dismiss="modal">Cancel</button>
и в моем JavaScript-коде я:
$("#modal-btn-ok").one("click", null, null, function(){
// My stuff to be done
});
в то время как событие "click" не относится к кнопке "Отмена". Теперь модально закрывается правильно и позволяет снова играть с "нормальной" страницей. На самом деле кажется, что data-dismiss="modal" должен быть единственным способом указать, что кнопка (или любой элемент DOM) должна закрыть модальность Bootstrap. Метод .modal('hide'), кажется, ведет себя не вполне контролируемым образом.
Надеюсь, это поможет!
Эта проблема также может возникать, если вы скрываете, а затем слишком быстро показываете модальное окно. Это было упомянуто в другом месте для вопроса, но я расскажу подробнее.
Проблема связана с синхронизацией и переходом на постепенный переход. Если вы покажете модальность до того, как переход на постепенный переход к предыдущему модальному завершен, вы увидите эту проблему с постоянным фоном (модальный фон останется на экране, на вашем пути). Bootstrap явно не поддерживает несколько одновременных модалов, но это кажется проблемой, даже если модальный, который вы скрываете, и модальный, который вы показываете, одинаковы.
Если это правильная причина для вашей проблемы, вот несколько вариантов смягчения проблемы. Вариант № 1 - это быстрый и простой тест, чтобы определить, действительно ли время перехода к затуханию является причиной вашей проблемы.
Ниже приведены некоторые связанные с этим вопросы загрузки бутстрапа. Возможно, что есть больше сообщений трекера, чем показано ниже.
.modal( 'скрыть')
В ручном режиме скрывается модальный. Возврат к вызывающему абоненту до того, как модал действительно был скрыт (т.е. до появления события hidden.bs.modal).
Итак, вместо
$('#myModal').modal('hide');
$('#someOtherSelector').trigger('click');
делать
$('#myModal').modal('hide');
$('#myModal').on('hidden.bs.modal', function() {
$('#someOtherSelector').trigger('click');
});
Итак, вы обязательно дождитесь завершения события "Скрыть".
Даже я столкнулся с аналогичной проблемой, у меня были следующие две кнопки
<button id="confirm-delete-btn" >Yes, Delete this note.</button>
<button id="confirm-delete-cancel" data-dismiss="modal">No</button>
Я хотел выполнить некоторую операцию ajax и на успех этой операции ajax закрыть модальный. Итак, вот что я сделал.
$.ajax({
url: '/ABC/Delete/' + self.model.get("Id")
, type: 'DELETE'
, success: function () {
setTimeout(function () {
self.$("#confirm-delete-cancel").trigger("click");
}, 1200);
}
, error: function () {}
});
Я вызвал событие щелчка кнопки "Нет", у которого было свойство data-dismiss="modal". И это сработало:)
использование:
$('.modal.in').modal('hide')
Я знаю, что это очень старый пост, но это может помочь. Это очень маленький обходной путь для меня
$('#myModal').trigger('click');
Вот это, это должно решить проблему
Это решение для Ruby on Rails 3.x и файла js.erb, который перестраивает часть DOM, включая модальный. Он работает независимо от того, вызван ли вызов ajax из модального или из другой части страницы.
if ($("#my-modal").attr("aria-hidden") === "false") {
$("#my-modal").modal('hide').on('hidden.bs.modal', function (event) {
functionThatEndsUpDestroyingTheDOM();
});
} else {
functionThatEndsUpDestroyingTheDOM();
}
Благодаря @BillHuertas для начальной точки.
проблема обновления.
Моя проблема возникла из-за размещения пакета обновлений. У меня был весь модальный в обновлении. Если вы объявляете модальный вне поля обновления и просто говорите, что модальное тело на панели обновления, то $ ( '# MyModalID') модальность ( 'шкура'). работал.
Другая возможная ошибка, которая может вызвать эту проблему,
Убедитесь, что вы не включили bootstrap.js script более одного раза на свою страницу!
Другая точка зрения на этот вопрос. (Я использую версию bootstrap.js 3.3.6)
Я ошибочно инициализирую модальный как вручную, так и в javascript:
$('#myModal').modal({
keyboard: false
})
и используя
data-toggle="modal"
в этой кнопке, как показано ниже (показано в документе)
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
поэтому в результате создается два экземпляра
<div class="modal-backdrop fade in"></div>
присоединяйтесь к телу моего html, когда открываете модальный. Это может быть причиной закрытия модальности с помощью функции:
$('#myModal').modal('hide');
он удаляет только один экземпляр заднего плана (как показано выше), поэтому фон не исчезнет. Но он исчез, если вы используете data-dismiss="modal" add on html как show в документе bootstrap.
Таким образом, решение моей проблемы заключается в том, чтобы только инициализировать модальное вручную в javascript и не использовать атрибут данных. Таким образом, я могу как закрыть модальное вручную, так и с помощью data-dismiss="modal".
Надеюсь, это поможет, если вы столкнулись с той же проблемой, что и я.
FYI, если кто-то столкнется с этим еще... Я потратил около 3 часов, чтобы узнать, что лучший способ сделать это:
$("#my-modal").modal("hide");
$("#my-modal").hide();
$('.modal-backdrop').hide();
$("body").removeClass("modal-open");
Эта функция для закрытия модальности очень неинтуитивна.
Используя toggle вместо hide, решила мою проблему
Убедитесь, что вы не используете один и тот же элемент Id/class в другом месте для элемента, не связанного с модальным компонентом.
То есть.. если вы определяете свои кнопки, которые вызывают модальные всплывающие окна, используя имя класса 'myModal', убедитесь, что нет несвязанных элементов, имеющих такое же имя класса.
. $ ( '# MyModal') триггер ( 'щелчок');
Это сработало для меня. Он не закрывается, потому что когда вы открываете всплывающее окно, он запускает 2 или 3 модальных фона. Поэтому, когда вы делаете $ ('# myModal')). Modal ('hide'); это влияет только на один модальный фон и остальное остается.
В проекте .net MVC4 у меня появилось модальное всплывающее окно (bootstrap 3.0) внутри Ajax.BeginForm(OnComplete = "addComplete" [дополнительный код удален]). Внутри javascript "addComplete" у меня был следующий код. Это решило мою проблему.
$( '# moreLotDPModal') скрыть();.
$( "# moreLotDPModal" ). data ('bs.modal'). isShown = false;
$( 'тело') removeClass ( 'модальных открытой');.
$( 'модальное-фон'.) Удалить();.
$( '# moreLotDPModal') removeClass ( "в" );.
$('# moreLotDPModal'). attr ('aria-hidden', "true" );
У меня была та же проблема. Я обнаружил, что это произошло из-за конфликта между Bootstrap и JQueryUI.
Оба используют класс "close". Изменение класса в том или ином исправляет это.
У меня была такая же проблема.
Однако я использовал bootbox.js, поэтому он мог бы что-то с этим сделать.
В любом случае, я понял, что проблема вызвана наличием элемента с тем же классом, что и родительский. Когда один из этих элементов используется для привязки функции щелчка для отображения модальности, возникает проблема.
то есть. вот что вызывает проблему:
<div class="myElement">
<div class="myElement">
Click here to show modal
</div>
</div>
измените его так, чтобы элемент, на который был нажат, не имеет того же класса, что и его родительский, любой из них - дети или любые другие предки. Это, вероятно, хорошая практика, чтобы сделать это в целом при привязке функций щелчка.
Я работаю с Meteor, и у меня такая же проблема. Причиной моей ошибки было следующее:
{{#if tourmanager}}
{{>contactInformation tourmanager}}
{{else}}
<a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
{{>addArtistTourmanagerModal}}
{{/if}}
Как вы можете видеть, я добавил модальность в else, поэтому, когда мой модальный обновил контактную информацию, if имел другое состояние. Это привело к тому, что модальный шаблон был исключен из DOM незадолго до его закрытия.
Решение: переместите модальное из if-else:
{{#if tourmanager}}
{{>contactInformation tourmanager}}
{{else}}
<a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
{{>addArtistTourmanagerModal}}
{{/if}}
//Create modal appending on body
myModalBackup = null;
$('#myModal').on('hidden.bs.modal', function(){
$('body').append(myModalBackup.clone());
myModalBackup = null;
});
//Destroy, clone and show modal
myModalBackup = $('#myModal').clone();
myModalBackup.find('.modal-backdrop').remove();
$('#myModal').modal('hide').remove();
myModalBackup.find('.info1').html('customize element <b>1</b>...');
myModalBackup.find('.info2').html('customize element <b>2</b>...');
myModalBackup.modal('show');
скрипт → https://jsfiddle.net/o6th7t1x/4/
начальное значение вашего атрибута данных может быть
"static", "true", "false" .
static и true добавить модальную тень, а false отключить тень, поэтому вам просто нужно изменить это значение с помощью первого щелчка к ложному. например:
$(document).on('ready',function(){
var count=0;
$('#id-which-triggers-modal').on('click',function(){
if(count>0){
$(this).attr('data-backdrop','false')
}
count++;
});
});У меня была проблема с замораживанием экрана в фоновом режиме, но в несколько другом сценарии: когда отображались 2 обратных к модам. например Первый попросит подтверждение сделать что-то, и после нажатия кнопки "подтвердить" действие натолкнутся на ошибку, а второй модальный будет отображаться для всплытия сообщения об ошибке. Второй модальный фон заморозит экран. Не было никаких столкновений в именах классов или id элементов.
Способ устранения проблемы заключался в том, чтобы предоставить браузеру достаточно времени для обработки модального фона. Вместо того, чтобы немедленно принять действие после нажатия "подтвердить", дайте браузеру сказать 500 мс, чтобы скрыть 1-й модальный и очистить задний фон и т.д. - затем выполните действие, которое закончится показанием ошибки.
<button type="button" class="btn btn-red" data-dismiss="modal" on-tap="_dialogConfirmed">Confirm</button>
...
Функция _dialogConfirmed() имеет следующий код:
var that = this;
setTimeout(function () {
if (that.confirmAction) {
(that.confirmAction)();
that.confirmAction = undefined;
}
}, 500);
Я предполагаю, что другие решения работают, потому что они занимают достаточно времени, предоставляя браузеру необходимое время очистки.
В ASP.NET добавьте обновление для UpdatePanel по коду после jquery. Пример:
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal('hide');", true);
upModal.Update();
Из https://github.com/twbs/bootstrap/issues/19385
Модальные методы show/hide являются асинхронными. Поэтому код, например:
foo.modal("hide"); bar.modal("show");недействителен. Вам нужно подождать показывая/скрываясь, чтобы закончить (прослушивая показанные/скрытые события; видеть http://getbootstrap.com/javascript/#modals-events) перед вызовом показать или скрыть методы снова.
У меня была эта проблема, когда я дважды открывал один и тот же модальный режим, поэтому простое исправление проверяло, было ли это уже показано, а затем снова не показывать:
$('#modalTitle').text(...);
$('#modalMessage').text(...);
if($('#messageModal').is(':hidden')){
$('#messageModal').modal('show');
}
Попробуйте это
$('#something_clickable').on('click', function () {
$("#my_modal").modal("hide");
$("body").removeClass("modal-open");
$('.modal-backdrop').remove();
});
Это отлично работает для меня.
У меня была аналогичная проблема. Я использовал Boostrap в сочетании с Backbone, и я захватывал клики кнопки "Сделай это", а затем прекратил распространение этих событий. Необычно, это сделало модальный уйти, но не фон. Если я вызываю event.preventDefault(), но не вызываю stopPropagation(), все работает нормально.