Я использую модальное диалоговое окно начальной загрузки Twitter. Когда я нажимаю кнопку отправки в модальном диалоговом окне начальной загрузки, он отправляет запрос AJAX. Моя проблема в том, что модальный фон не исчезает. Модальное диалоговое окно действительно исчезает правильно, но вместо этого остается «модальный фон в», который создает непрозрачность на экране.
Что я могу сделать?
twitter-bootstrap
modal-dialog
paganotti
источник
источник
$('#myModal').modal('hide')
? Можете ли вы положить код здесь?Ответы:
Убедитесь, что вы не заменяете контейнер, содержащий фактическое модальное окно, когда выполняете запрос AJAX, потому что Bootstrap не сможет найти ссылку на него, когда вы попытаетесь закрыть его. В вашем обработчике Ajax complete удалите модальные и затем замените данные.
Если это не сработает, вы всегда можете заставить его уйти, выполнив следующие действия:
источник
$('.modal-backdrop').remove()
кажется, нарушает будущие модалы, открывающиеся правильно.Убедитесь, что ваш первоначальный вызов для
$.modal()
применения модального поведения не передает больше элементов, чем вы предполагали. Если это произойдет, это приведет к созданию модального экземпляра с элементом background для каждого элемента в коллекции. Следовательно, может показаться, что фон остался позади, когда на самом деле вы смотрите на один из дубликатов.В моем случае я пытался создать модальный контент на лету с помощью следующего кода:
Здесь HTML-комментарий после закрывающего
</div>
тега означал, что myModal на самом деле был набором jQuery из двух элементов - div и комментария. Оба они были покорно превращены в модалы, каждый со своим собственным элементом фона. Конечно, модал, сделанный из комментария, был невидим, кроме фона, поэтому, когда я закрывал реальный модал (div), казалось, что фон остался позади.источник
Я просто слишком долго занимался этой проблемой :)
В то время как другие ответы были полезны и действительны, мне показалось немного беспорядочным эффективно воссоздать функцию скрытия мод от Bootstrap, поэтому я нашел более чистое решение.
Проблема заключается в том, что есть последовательность событий, которые происходят, когда вы звоните
Когда вы в результате запроса AJAX замените группу HTML, события, скрывающие модальное состояние, не завершатся. Однако Bootstrap вызывает событие, когда все закончено , и вы можете подключиться к нему следующим образом:
Надеюсь, это полезно!
источник
$('#myModal').removeClass('fade');$(myModal').modal('hide')'
Вставьте в свою кнопку действия это:
и
пример:
если вы введете этот data-attr, .modal-background не появится. документация об этом по этой ссылке: http://getbootstrap.com/javascript/#modals-usage
источник
data-backdrop="false"
это просто вариант, который говорит начальной загрузке не использовать фон вообще . Это не имеет ничего общего с реальной проблемой, оно просто избегает ее. Это все равно что сказать: «Я не умею плавать, поэтому я перестал ходить в бассейн». Это круто, но ты все еще не умеешь плавать, и если твой босс бросит тебя в глубокий конец, ты утонешь. Во многих случаях требуется ручное вмешательство, например, когда Angular давит на DOM на фоне вашего приложения.Если вы используете копирование и вставку с самого сайта getboostrap в созданный HTML-селектор, обязательно удалите комментарий «<! - /.modal ->». Bootstrap запутывается и думает, что комментарий является вторым модальным элементом. Это создает еще одно отступление для этого «второго» элемента.
источник
Я знаю, что это очень старый пост, но это может помочь. Это очень маленький обходной путь для меня
Вот это, это должно решить проблему
источник
myModal
должно быть? И зачем закрывать диалог? Модальные диалоги закрываются только при нажатии кнопки закрытия или за пределами диалогового окна. Это не похоже на решение.У меня возникла похожая проблема: в моем модальном окне у меня есть две кнопки «Отмена» и «ОК». Первоначально обе кнопки закрывали модальное окно, вызывая
$('#myModal').modal('hide')
(с «OK», предварительно выполняющим некоторый код), и сценарий был бы следующим:Что ж, мой коллега из следующего отдела спас мой день: вместо того
$('#myModal').modal('hide')
, чтобы вызывать, присвойте своим кнопкам атрибутdata-dismiss="modal"
и добавьте событие "click" к вашей кнопке "Submit". В моей проблеме код HTML (ну, TWIG) для кнопки:и в моем коде JavaScript у меня есть:
в то время как никакое событие "щелчка" не приписано кнопке "Отмена". Модал теперь закрывается должным образом и позволяет мне снова играть со "нормальной" страницей. На самом деле кажется, что
data-dismiss="modal"
единственным способом указать, что кнопка (или любой другой элемент DOM) должен закрывать мод Bootstrap..modal('hide')
Метод , кажется, ведут себя не вполне контролируемым образом.Надеюсь это поможет!
источник
Эта проблема также может возникнуть, если вы прячете, а затем снова показываете модальное окно слишком быстро. Это было упомянуто в другом месте для вопроса, но я предоставлю более подробную информацию ниже.
Проблема связана с синхронизацией и постепенным переходом. Если вы покажете модальный режим до того, как завершится переход затухания для предыдущего модального режима, вы увидите эту постоянную проблему фона (модальный фон останется на экране, на вашем пути). Bootstrap явно не поддерживает множественные одновременные модалы, но это кажется проблемой, даже если модал, который вы скрываете, и модал, который вы показываете, одинаковы.
Если это правильная причина вашей проблемы, вот несколько вариантов решения этой проблемы. Вариант № 1 - это быстрый и простой тест, позволяющий определить, действительно ли время перехода затухания является причиной вашей проблемы.
Вот некоторые связанные сообщения отслеживания проблем начальной загрузки. Возможно, что сообщений о трекере больше, чем я перечислил ниже.
источник
.modal ( 'скрыть')
Вручную скрывает модал. Возврат к вызывающей стороне до того, как модал был фактически скрыт (т.е. до того, как произошло событие hidden.bs.modal).
Так что вместо
делать
Поэтому вы обязательно должны дождаться окончания события «скрыть».
источник
Еще одна возможная ошибка, которая может привести к этой проблеме,
Убедитесь, что вы не включили
bootstrap.js
скрипт более одного раза на своей странице!источник
Даже я столкнулся с подобной проблемой, у меня были следующие две кнопки
Я хотел выполнить некоторую операцию ajax и, если она была успешной, закрыть модал. Итак, вот что я сделал.
Я вызвал событие нажатия кнопки «Нет», у которой было
data-dismiss="modal"
свойство. И это сработало :)источник
использовать:
Источник
источник
Это решение предназначено для Ruby on Rails 3.x и файла js.erb, который перестраивает часть DOM, включая модальный. Это работает независимо от того, был ли вызов ajax модальным или из другой части страницы.
Спасибо @BillHuertas за отправную точку.
источник
. $ ( '# MyModal') триггер ( 'щелчок');
Это сработало для меня. Он не закрывается, потому что, когда вы открываете всплывающее окно, он запускает 2 или 3 модальных фона. Поэтому, когда вы делаете $ ('# myModal')). Modal ('hide'); это влияет только на один модальный фон и остальное остается.
источник
проблема с обновлением панели.
Моя проблема была связана с размещением панели обновления. У меня был весь модал в панели обновления. Если вы объявляете модальное состояние за пределами панели обновления и просто говорите модальное тело на панели обновления, тогда $ ('# myModalID'). Modal ('hide'); работал.
источник
Еще одна точка зрения на этот вопрос. (Я использую bootstrap.js версии 3.3.6)
Я ошибаюсь инициализировать модальные оба вручную в JavaScript:
и с помощью
data-toggle="modal"
в этой кнопке, как пример ниже (показано в документе)
поэтому результат его создания двух экземпляров
добавить в тело моего HTML при открытии модального. Это может быть причиной закрытия модального режима с помощью функции:
он удаляет только один экземпляр фона (как показано выше), чтобы фон не исчезал. Но он исчез, если вы используете
data-dismiss="modal"
add на html, как показано в загрузочном документе.Таким образом, решение моей проблемы состоит в том, чтобы только инициализировать модальное вручную в javascript и не использовать атрибут данных. Таким образом, я могу закрыть модальное вручную и с помощью
data-dismiss="modal"
функций.Надеюсь, это поможет, если вы столкнулись с той же проблемой, что и я.
источник
К вашему сведению, если кто-то столкнется с этим до сих пор ... Я потратил около 3 часов, чтобы обнаружить, что лучший способ сделать это заключается в следующем:
Эта функция, чтобы закрыть модальное очень интуитивно.
источник
Добавление
data-dismiss="modal"
любых кнопок в моем модале сработало для меня. Я хотел, чтобы моя кнопка вызывала функцию с angular для запуска вызова AJAX И закрывала модал, поэтому я добавил.toggle()
в функцию, и она работала хорошо. (В моем случае я использовалbootstrap modal
и использовал некоторыеangular
, а не реальный модальный контроллер).источник
У меня такая же проблема. Я обнаружил, что это произошло из-за конфликта между Bootstrap и JQueryUI.
Оба используют класс «закрыть». Изменение класса в одном или другом исправляет это.
источник
Использование переключателя вместо скрытия решило мою проблему
источник
Убедитесь, что вы не используете тот же элемент Id / class в другом месте для элемента, не связанного с модальным компонентом.
То есть ... если вы идентифицируете свои кнопки, которые запускают модальные всплывающие окна, используя имя класса «myModal», убедитесь, что нет связанных элементов с таким же именем класса.
источник
После применения решения с самым высоким рейтингом у меня возникла проблема, заключающаяся в том, что оно нарушает правильное открытие будущих модалов. Я нашел свое решение, которое работает хорошо
источник
У меня была такая же проблема при попытке отправить форму. Решение состояло в том, чтобы изменить тип кнопки с
submit
наbutton
и затем обработать событие нажатия кнопки следующим образом:источник
В проекте .net MVC4 у меня было модальное всплывающее окно (bootstrap 3.0) внутри Ajax.BeginForm (OnComplete = "addComplete" [дополнительный код удален]). Внутри «addComplete» javascript у меня был следующий код. Это решило мою проблему.
источник
У меня была такая же проблема.
Однако я использовал bootbox.js, так что это могло быть как-то связано с этим.
В любом случае, я понял, что проблема вызвана наличием элемента с тем же классом, что и у его родителя. Когда один из этих элементов используется для привязки функции щелчка для отображения модального режима, возникает проблема.
то есть это то, что вызывает проблему:
измените его так, чтобы элемент, по которому щелкали, не имел тот же класс, что и его родитель, любой из его дочерних элементов или любых других предков. Это, вероятно, хорошая практика, чтобы сделать это в общем случае при привязке функций щелчка.
источник
Я работаю с Meteor, и у меня возникла та же проблема. Причиной моей ошибки было следующее:
Как вы можете видеть, я добавил модал в else, поэтому, когда мой модал обновил контактную информацию, if имел другое состояние. Это привело к тому, что модальный шаблон был оставлен вне DOM непосредственно перед его закрытием.
Решение: переместить модал из if-else:
источник
скрипка -> https://jsfiddle.net/o6th7t1x/4/
источник
первоначальное значение вашего фона данных атрибута может быть
«статический», «истинный», «ложный».
static и true добавляют модальную тень, в то время как false отключают тень, поэтому вам просто нужно изменить это значение при первом нажатии на false. как это:
источник
У меня была проблема замораживания модального фонового экрана, но в несколько ином сценарии: когда отображались 2 модальных контекста. Например, первый запросил бы подтверждение, чтобы что-то сделать, и после нажатия кнопки «Подтвердить», действие натолкнется на ошибку, и появится 2-й модал, чтобы выскочить сообщение об ошибке. 2-й модальный фон заморозил бы экран. Не было столкновений в именах классов или идентификаторах элементов.
Чтобы устранить проблему, нужно было дать браузеру достаточно времени, чтобы справиться с модальным фоном. Вместо немедленного выполнения действия после нажатия кнопки «Подтвердить», дайте браузеру, скажем, 500 мс, чтобы скрыть 1-й мод, очистить фон и т. Д., А затем выполнить действие, которое в конечном итоге приведет к отображению модальной ошибки.
Функция _dialogConfirmed () имеет следующий код:
Я предполагаю, что другие решения работали, потому что они занимали достаточно времени, чтобы дать браузеру необходимое время для очистки.
источник
В ASP.NET добавьте обновление для UpdatePanel в код после команды jquery. Пример:
источник