Twitter-бутстрап модального фона не исчезает

Я использую модальное диалоговое окно начальной загрузки Twitter. Когда я нажимаю кнопку отправки в модальном диалоговом окне начальной загрузки, он отправляет запрос AJAX. Моя проблема в том, что модальный фон не исчезает. Модальное диалоговое окно действительно исчезает правильно, но вместо этого остается «модальный фон в», который создает непрозрачность на экране.

Что я могу сделать?

Убедитесь, что вы не заменяете контейнер, содержащий фактическое модальное окно, когда выполняете запрос AJAX, потому что Bootstrap не сможет найти ссылку на него, когда вы попытаетесь закрыть его. В вашем обработчике Ajax complete удалите модальные и затем замените данные.

Если это не сработает, вы всегда можете заставить его уйти, выполнив следующие действия:

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

Убедитесь, что ваш первоначальный вызов для $.modal()применения модального поведения не передает больше элементов, чем вы предполагали. Если это произойдет, это приведет к созданию модального экземпляра с элементом background для каждого элемента в коллекции. Следовательно, может показаться, что фон остался позади, когда на самом деле вы смотрите на один из дубликатов.

В моем случае я пытался создать модальный контент на лету с помощью следующего кода:

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

Когда вы в результате запроса AJAX замените группу HTML, события, скрывающие модальное состояние, не завершатся. Однако 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-background не появится. документация об этом по этой ссылке: http://getbootstrap.com/javascript/#modals-usage

Если вы используете копирование и вставку с самого сайта getboostrap в созданный HTML-селектор, обязательно удалите комментарий «<! - /.modal ->». Bootstrap запутывается и думает, что комментарий является вторым модальным элементом. Это создает еще одно отступление для этого «второго» элемента.

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

$('#myModal').trigger('click');

Вот это, это должно решить проблему

У меня возникла похожая проблема: в моем модальном окне у меня есть две кнопки «Отмена» и «ОК». Первоначально обе кнопки закрывали модальное окно, вызывая $('#myModal').modal('hide')(с «OK», предварительно выполняющим некоторый код), и сценарий был бы следующим:

1. Откройте модальное окно
2. Выполните некоторые операции, затем нажмите «ОК», подтвердите их и закройте модальные
3. Снова откройте модал и отклоните его, нажав «Отмена».
4. Снова откройте модал, снова нажмите «Отмена» ==> фон больше не доступен!

Что ж, мой коллега из следующего отдела спас мой день: вместо того $('#myModal').modal('hide'), чтобы вызывать, присвойте своим кнопкам атрибут data-dismiss="modal"и добавьте событие "click" к вашей кнопке "Submit". В моей проблеме код 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
});

в то время как никакое событие "щелчка" не приписано кнопке "Отмена". Модал теперь закрывается должным образом и позволяет мне снова играть со "нормальной" страницей. На самом деле кажется, что data-dismiss="modal"единственным способом указать, что кнопка (или любой другой элемент DOM) должен закрывать мод Bootstrap. .modal('hide')Метод , кажется, ведут себя не вполне контролируемым образом.

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

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

Проблема связана с синхронизацией и постепенным переходом. Если вы покажете модальный режим до того, как завершится переход затухания для предыдущего модального режима, вы увидите эту постоянную проблему фона (модальный фон останется на экране, на вашем пути). Bootstrap явно не поддерживает множественные одновременные модалы, но это кажется проблемой, даже если модал, который вы скрываете, и модал, который вы показываете, одинаковы.

Если это правильная причина вашей проблемы, вот несколько вариантов решения этой проблемы. Вариант № 1 - это быстрый и простой тест, позволяющий определить, действительно ли время перехода затухания является причиной вашей проблемы.

1. Отключить анимацию исчезновения для модального (убрать класс «исчезнуть» из диалога)
2. Обновите модальный текст вместо того, чтобы скрывать и повторно показывать его.
3. Исправьте время, чтобы оно не показывало модал до тех пор, пока он не закончит скрывать предыдущий модал. Используйте модальные события, чтобы сделать это. http://getbootstrap.com/javascript/#modals-events

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

• https://github.com/twbs/bootstrap/issues/735
• https://github.com/twbs/bootstrap/issues/2839
• https://github.com/twbs/bootstrap/issues/19385

.modal ( 'скрыть')

Вручную скрывает модал. Возврат к вызывающей стороне до того, как модал был фактически скрыт (т.е. до того, как произошло событие hidden.bs.modal).

Так что вместо

$('#myModal').modal('hide');
$('#someOtherSelector').trigger('click');

делать

$('#myModal').modal('hide');
$('#myModal').on('hidden.bs.modal', function() {
   $('#someOtherSelector').trigger('click');
});

Поэтому вы обязательно должны дождаться окончания события «скрыть».

Еще одна возможная ошибка, которая может привести к этой проблеме,

Убедитесь, что вы не включили bootstrap.jsскрипт более одного раза на своей странице!

Даже я столкнулся с подобной проблемой, у меня были следующие две кнопки

<button id="confirm-delete-btn" >Yes, Delete this note.</button>
<button id="confirm-delete-cancel" data-dismiss="modal">No</button>

Я хотел выполнить некоторую операцию 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') 

Источник

Это решение предназначено для 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 за отправную точку.

. $ ( '# MyModal') триггер ( 'щелчок');

Это сработало для меня. Он не закрывается, потому что, когда вы открываете всплывающее окно, он запускает 2 или 3 модальных фона. Поэтому, когда вы делаете $ ('# myModal')). Modal ('hide'); это влияет только на один модальный фон и остальное остается.

проблема с обновлением панели.

Моя проблема была связана с размещением панели обновления. У меня был весь модал в панели обновления. Если вы объявляете модальное состояние за пределами панели обновления и просто говорите модальное тело на панели обновления, тогда $ ('# myModalID'). Modal ('hide'); работал.

Еще одна точка зрения на этот вопрос. (Я использую 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 на html, как показано в загрузочном документе.

Таким образом, решение моей проблемы состоит в том, чтобы только инициализировать модальное вручную в javascript и не использовать атрибут данных. Таким образом, я могу закрыть модальное вручную и с помощью data-dismiss="modal" функций.

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

К вашему сведению, если кто-то столкнется с этим до сих пор ... Я потратил около 3 часов, чтобы обнаружить, что лучший способ сделать это заключается в следующем:

$("#my-modal").modal("hide");
$("#my-modal").hide();
$('.modal-backdrop').hide();
$("body").removeClass("modal-open");

Эта функция, чтобы закрыть модальное очень интуитивно.

Добавление data-dismiss="modal"любых кнопок в моем модале сработало для меня. Я хотел, чтобы моя кнопка вызывала функцию с angular для запуска вызова AJAX И закрывала модал, поэтому я добавил .toggle()в функцию, и она работала хорошо. (В моем случае я использовал bootstrap modalи использовал некоторые angular, а не реальный модальный контроллер).

<button type="button" class="btn btn-primary" data-dismiss="modal"
ng-click="functionName()"> Do Something </button>

$scope.functionName = function () {
angular.element('#modalId').toggle();
  $.ajax({ ajax call })
}

У меня такая же проблема. Я обнаружил, что это произошло из-за конфликта между Bootstrap и JQueryUI.

Оба используют класс «закрыть». Изменение класса в одном или другом исправляет это.

Использование переключателя вместо скрытия решило мою проблему

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

То есть ... если вы идентифицируете свои кнопки, которые запускают модальные всплывающие окна, используя имя класса «myModal», убедитесь, что нет связанных элементов с таким же именем класса.

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

        element.on("shown.bs.modal", function () {
            if ($(".modal-backdrop").length > 1) {
                $(".modal-backdrop").not(':first').remove();
            }
            element.css('display', 'block');
        });

У меня была такая же проблема при попытке отправить форму. Решение состояло в том, чтобы изменить тип кнопки с submitна buttonи затем обработать событие нажатия кнопки следующим образом:

'click .js-save-modal' () {
    $('#myFormId').submit();
    $('#myModalId').modal('hide');
}

В проекте .net MVC4 у ​​меня было модальное всплывающее окно (bootstrap 3.0) внутри Ajax.BeginForm (OnComplete = "addComplete" [дополнительный код удален]). Внутри «addComplete» javascript у меня был следующий код. Это решило мою проблему.

$ ( '# MoreLotDPModal') скрыть ().

$ ("# moreLotDPModal"). data ('bs.modal'). isShown = false;

$ ( 'Тело') removeClass ( 'модальной открытым').

. $ ( 'Модальной фон') удалить ();

$ ( '# MoreLotDPModal') removeClass ( "в").

$ ('# moreLotDPModal'). attr ('aria-hidden', "true");

У меня была такая же проблема.

Однако я использовал 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 отключают тень, поэтому вам просто нужно изменить это значение при первом нажатии на 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 модальных контекста. Например, первый запросил бы подтверждение, чтобы что-то сделать, и после нажатия кнопки «Подтвердить», действие натолкнется на ошибку, и появится 2-й модал, чтобы выскочить сообщение об ошибке. 2-й модальный фон заморозил бы экран. Не было столкновений в именах классов или идентификаторах элементов.

Чтобы устранить проблему, нужно было дать браузеру достаточно времени, чтобы справиться с модальным фоном. Вместо немедленного выполнения действия после нажатия кнопки «Подтвердить», дайте браузеру, скажем, 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();