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

260

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

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

paganotti
источник
5
Вы используете $('#myModal').modal('hide')? Можете ли вы положить код здесь?
Pigueiras
20
Если вы используете копирование и вставку с самого сайта getboostrap в созданный HTML-селектор, обязательно удалите комментарий «<! - /.modal ->». Bootstrap запутывается и думает, что комментарий является вторым модальным элементом. Это создает еще одно отступление для этого «второго» элемента.
Иордания
@Jordan: Ваш комментарий должен быть ответом! В моем случае ваш комментарий был правильным решением!
BlaM
См. Следующее: stackoverflow.com/questions/22207377/…
Нутан,
Я знаю, что вопрос старый, но сегодня у меня есть похожая проблема, в моей ситуации было ошибочное удаление класса "modal-lg", который был оставлен только для "модального" создания беспорядка, когда вы собирались закрыть модальное с помощью клавиатуры / щелкнуть где-нибудь снаружи.
Маттео

Ответы:

550

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

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

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
ChezFre
источник
16
Дал бы этот ответ +2, если бы мог. Просто сэкономил мне часы!
Андре Ломбаард
9
Скрытие модального режима перед вызовом AJAX - плохое решение, если вам нужно оценить ответ AJAX и соответствующим образом обновить модальное значение.
Асцимо
19
Я считаю, что это также может быть вызвано вызовом модального режима ('hide') до полного завершения анимации исчезновения. Удаление класса исчезновения из модального может помочь.
EvilPuppetMaster
7
. $ ( 'модальной фон') удалить (); решил это для меня, не нужно удалять исчезать класс
Омар С.
34
$('.modal-backdrop').remove()кажется, нарушает будущие модалы, открывающиеся правильно.
Крок
65

Убедитесь, что ваш первоначальный вызов для $.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), казалось, что фон остался позади.

газопроводчик
источник
16
Этот парень был на деньги. Я удалил комментарии из модального режима, который я получал с помощью $ .html (), и теперь он работает. Чертовски странно
Matrym
2
Это была проблема и для меня.
Боб Блэк
6
Глупый бутстрап! Их собственный пример разметки (с комментариями в начале и в конце) нарушает эту парадигму. Удалите комментарий, и это работает!
goofballLogic
Тоже самое. Удаление комментариев решило проблему. Всего один вопрос. Я вижу, что модал отлично работает без добавления его в DOM с помощью $ ('body'). Append (myModal). Требуется ли добавить модал на страницу DOM?
ВикторЭспина
У меня был несоответствующий тег. Тот же результат. Спасибо!
jozxyqk
51

Я просто слишком долго занимался этой проблемой :)

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

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

$("#myModal").modal('hide');
functionThatEndsUpDestroyingTheDOM()

Когда вы в результате запроса AJAX замените группу HTML, события, скрывающие модальное состояние, не завершатся. Однако Bootstrap вызывает событие, когда все закончено , и вы можете подключиться к нему следующим образом:

$("#myModal").modal('hide').on('hidden.bs.modal', functionThatEndsUpDestroyingTheDOM);

Надеюсь, это полезно!

Билл Уэртас
источник
15
Я тоже провел слишком долго! Этот ответ дал мне ключ к разгадке - что-то смутило мой DOM (угловой). Глядя на код начальной загрузки, вы можете просто принудительно удалить фон, выполнив сначала удаление класса исчезновения:$('#myModal').removeClass('fade');$(myModal').modal('hide')'
Ross R
Должен быть принятый ответ - он использует API начальной загрузки по назначению и не взламывает тело с помощью .modal-open
Aaron Hudon
Это самый добросовестный и добросовестный ответ.
JacobIRR
Отличный ответ, моя проблема была также в связи с вызовом ajax, заменяющим dom - я думаю, модальный ('hide') возвращает себя или модальную ссылку, чтобы мы могли присоединиться к 'hidden.bs.modal'?
Майкл Харпер
Утверждение, что события, скрывающие
модал,
32

Вставьте в свою кнопку действия это:

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

kampageddon
источник
2
Это верный ответ. Ни при каких обстоятельствах не пытайтесь вручную делать то, для чего предназначен Bootstrap. Если это будет вашим решением, вы неправильно его реализуете. Я думаю, что стандартный HTML-код на сайте начальной загрузки немного неполон, и именно поэтому многие люди испытывают описанное поведение (включая меня). Спасибо! +1
Бен Франсен
3
Что делать, если вы хотите запустить модал не с кнопки?
Shinzou
7
@ben ты не прав. data-backdrop="false"это просто вариант, который говорит начальной загрузке не использовать фон вообще . Это не имеет ничего общего с реальной проблемой, оно просто избегает ее. Это все равно что сказать: «Я не умею плавать, поэтому я перестал ходить в бассейн». Это круто, но ты все еще не умеешь плавать, и если твой босс бросит тебя в глубокий конец, ты утонешь. Во многих случаях требуется ручное вмешательство, например, когда Angular давит на DOM на фоне вашего приложения.
Уэсли Смит
18

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

Иордания
источник
Будь я проклят ... это была моя проблема. Убрал комментарий и все заработало. Как, черт возьми, комментарий HTML запутывает Bootstrap !?
Тёрнер Хейс,
Я считаю, что он ищет элементы HTML, чтобы получить счет. Поскольку комментарии считаются элементами, это количество неправильно с этим комментарием.
Иордания
случилось со мной, когда был этот файл в шаблоне Усы
Павел 'PK' Каминский
Комментарии существуют в DOM таким образом, что это спутало половину javascript модального компонента. Я забыл, как именно. Это было некоторое время назад.
Иордания
Святой Молей - это действительно работает! Это такая странная ошибка.
Дрор С.
14

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

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

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

Чайтанья Банканхал
источник
1
Это отлично сработало для меня. Используя bootstrap 4 здесь.
Эдди Тейшейра
1
Это должен быть ответ по умолчанию. Спасибо
Макаму Эванс
что myModalдолжно быть? И зачем закрывать диалог? Модальные диалоги закрываются только при нажатии кнопки закрытия или за пределами диалогового окна. Это не похоже на решение.
MushyPeas
что такое myModal? -> Это идентификатор основного модального. И зачем закрывать диалог? -> Это работает, потому что по умолчанию, когда вы щелкаете за пределами модального окна, действие распространяется на своего родителя, и оно там обрабатывается.
Чайтанья Банканхал
9

У меня возникла похожая проблема: в моем модальном окне у меня есть две кнопки «Отмена» и «ОК». Первоначально обе кнопки закрывали модальное окно, вызывая $('#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')Метод , кажется, ведут себя не вполне контролируемым образом.

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

Дима Габачов
источник
То же самое и здесь, что если вы не хотите запускать модал с помощью кнопки?
Shinzou
9

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

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

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

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

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

Марк Ф Герра
источник
8

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

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

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

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

делать

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

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

Хельмут Хакл
источник
Это определенно лучшее решение. Таким образом, вам не нужно связываться с модальными классами, что, вероятно, является более правильным способом решения этой проблемы.
DeanMWake
6

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

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

Webinan
источник
5

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

<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"свойство. И это сработало :)

Ясир Шейх
источник
Запуск события click вручную не закрывает модальное окно в IE9 / IE10 для меня. Пытаюсь найти решение.
Энтони Хардер
Несмотря на это, проблема была несколько иной - к этой кнопке было прикреплено условие включения данных, и хотя IE продолжал обрабатывать события onclick, он не учитывал attr при отклонении данных.
Энтони Хардер
3

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

mindriot
источник
3

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

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

Ашаб
источник
2

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

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

Al Option
источник
Это была моя проблема. У меня был AjaxManager, создающий панели обновлений вокруг моего usercontrol, который содержал весь модал. Я оставил только тело модала в usercontrol и переместил все на главной странице, и все начало работать как положено, так что не меняйте свою <div id = "# mymodal"> часть!
AlexanderD
2

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

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

ohm89
источник
2

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

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

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

Ник М
источник
Работал как шарм.
Патту
2

Добавление 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 })
}
wendyg
источник
1

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

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

Мэтью Андрианакос
источник
1

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

Яш К
источник
1
поделитесь возможным ответом (пример). Это поможет другим понять хорошо
Сачит Мухандирам
1

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

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

user2707674
источник
1

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

        element.on("shown.bs.modal", function () {
            if ($(".modal-backdrop").length > 1) {
                $(".modal-backdrop").not(':first').remove();
            }
            element.css('display', 'block');
        });
Rez
источник
1

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

'click .js-save-modal' () {
    $('#myFormId').submit();
    $('#myModalId').modal('hide');
}
SYM
источник
0

В проекте .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");

JenonD
источник
0

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

Однако я использовал bootbox.js, так что это могло быть как-то связано с этим.

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

то есть это то, что вызывает проблему:

<div class="myElement">
    <div class="myElement">
        Click here to show modal
    </div>
</div>

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

Vin
источник
0

Я работаю с 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}}
Подводное кей
источник
0
//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/

Фабио Зангиролами
источник
0

первоначальное значение вашего фона данных атрибута может быть

«статический», «истинный», «ложный».

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++;
});


});

Алехандро Кинтеро
источник
0

У меня была проблема замораживания модального фонового экрана, но в несколько ином сценарии: когда отображались 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);

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

Behnam
источник
0

В ASP.NET добавьте обновление для UpdatePanel в код после команды jquery. Пример:

    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal('hide');", true);
    upModal.Update();
mathias.horn
источник