Я читал посты здесь, на сайте Bootstrap и гуглил как сумасшедший - но не могу найти то, что, я уверен, является простым ответом ...
У меня есть модальный Bootstrap, который я открываю из помощника link_to следующим образом:
<%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal", class: "btn btn-primary"} %>
В моем ContactsController.create
действии у меня есть код, который создает и Contact
передает create.js.erb
. Во create.js.erb
, у меня есть некоторый код обработки ошибок (смесь ruby и javascript). Если все идет хорошо, я хочу закрыть модал.
Вот где у меня проблемы. Кажется, я не могу отклонить модал, когда все идет хорошо.
Я пытался, $('#myModal').modal('hide');
и это не имеет никакого эффекта. Я также попробовал, $('#myModal').hide();
что заставляет модал отклонять, но оставляет фон.
Любое руководство о том, как закрыть модальный и / или удалить фон изнутри create.js.erb
?
редактировать
Вот разметка для myModal:
<div class="modal hide" id="myModal" >
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Add Contact</h3>
<div id="errors_notification">
</div>
</div>
<div class="modal-body">
<%= form_for :contact, url: contacts_path, remote: true do |f| %>
<%= f.text_field :first_name, placeholder: "first name" %>
<%= f.text_field :last_name, placeholder: "last name" %>
<br>
<%= f.submit "Save", name: 'save', class: "btn btn-primary" %>
<a class="close btn" data-dismiss="modal">Cancel</a>
<% end %>
</div>
<div class="modal-footer">
</div>
</div>
источник
$('#myModal').modal('hide');
правильный синтаксис для закрытия / скрытия модальных с помощью idmyModal
(вы можете проверить это на странице документации Bootstrap ). Вы уверены, что у вас есть элемент с этим идентификатором на вашей странице? Кроме того, что вы пытаетесь достичь с помощью этого звонка? Ваша текущая реализация выполняет Ajax-запросnew_contact_path
и одновременно открывает модальное содержимое:#myModal
- это то, что вы хотите?myModal
. Я перепробовал$('myModal').modal('hide')
и все равно ничего хорошего. Гектометр С точки зрения того, что я пытаюсь достичь, я думаю, что было бы неправильно использовать помощник link_to. Я заменил это на:<a data-toggle="modal" href="#myModal" class="btn btn-primary">Add Contact</a>
так как мне действительно не нужно звонитьnew_contact_path
. Я просто хочу, чтобы модал открылся, а затем занялся пользовательским вводом. Спасибо что нашли время ответить. Я посмотрю, смогу ли я разобраться с этим.$('#myModal').modal('hide');
(#
в вашем комментарии отсутствует).$('#myModal').modal('hide')
. JОтветы:
Когда модал открыт в окне браузера, используйте консоль браузера, чтобы попробовать
Если он работает (и модальные закрывается) , то вы знаете , что ваш близкий браузер не отправляется с сервера в браузер правильно.
Если это не сработает, то вам нужно дополнительно выяснить у клиента, что происходит. Например, убедитесь, что нет двух элементов с одинаковым идентификатором. Например, это работает в первый раз после загрузки страницы, но не во второй раз?
Консоль браузера: Firebug для Firefox, консоль отладки для Chrome или Safari и т. Д.
источник
близкий бутстрап модальные вы можете передать «шкура» в качестве опции для модального метода как последуйте
Пожалуйста, посмотрите на рабочую скрипку здесь
bootstrap также предоставляет события, которые вы можете подключить к модальной функциональности, например, если вы хотите запустить событие, когда модальное устройство скрыто от пользователя, вы можете использовать событие hidden.bs.modal, вы можете узнать больше о модальных методах и событиях здесь, в Документация
Если ни один из описанных выше методов не работает, присвойте своей кнопке закрытия идентификатор и нажмите кнопку «Закрыть».
источник
Я использую Bootstrap 3.4 Для меня это не работает
$('#myModal').modal('hide')
В отчаянии я сделал это:
Может быть, это не элегантно, но работает
источник
Лучшая форма, чтобы скрыть и показать модал с начальной загрузкой
источник
Я столкнулся с той же ошибкой, и эта строка кода действительно помогает мне.
источник
источник
Я нашел правильное решение, вы можете использовать этот код
источник
Я столкнулся с тем, что я считаю, была похожая проблема.
$('#myModal').modal('hide');
, Вероятно , работает через эту функцию и попадает в линиюПроблема в том, что значение isShown может быть неопределенным, даже если отображается модальное значение, и значение должно быть истинным. Я немного изменил код начальной загрузки для следующего
Это, казалось, решило проблему по большей части. Если фон все еще остается, вы всегда можете добавить вызов, чтобы удалить его вручную после скрытия вызова
$('.modal-backdrop').remove();
. Совсем не идеально, но работает.источник
( Со ссылкой на Bootstrap 3), чтобы скрыть модальный использование:
$('#modal').modal('hide')
. Но причина, по которой фон оставался (для меня), заключалась в том, что я уничтожал DOM для модального стиля, пока не закончился «hide».Чтобы решить эту проблему, я связал скрытое событие с удалением DOM. В моем случае:
this.render()
источник
this.render()
его показеundefined is not a function
в моей хромированной консоли.Мне повезло, что я позвонил после того, как «показанный» обратный вызов произошел:
Это гарантировало, что модал был загружен до вызова hide ().
источник
Мы обнаружили, что между вызовом нашего серверного кода и возвратом к успешному обратному вызову произошла лишь небольшая задержка. Если мы поместим вызов на сервер в
$("#myModal").on('hidden.bs.modal', function (e)
обработчик и затем вызовем$("#myModal").modal("hide");
метод, браузер скроет модальный режим и затем вызовет код на стороне сервера.Опять не элегантно, но функционально.
Как вы можете видеть, когда
myFunc
он вызывается, он скрывает модальный режим, а затем вызывает код на стороне сервера.источник
У меня была такая же проблема, и после небольшого количества экспериментов я нашел решение. В моем обработчике кликов мне нужно было остановить всплывающее событие, вот так:
источник
Вот документация: http://getbootstrap.com/javascript/#modals-methods
Вот метод: $ ('# myModal'). Modal ('hide')
Если вам нужно несколько раз открыть модал с разным контентом, предлагаю добавить (у вас основные js):
Таким образом, вы очистите содержимое для следующего открытия и избежите кеширования
источник
источник
Даже у меня такие же проблемы. Это мне очень помогло
источник
Я использовал этот простой код:
источник
$('#modal').modal('hide');
и его варианты не работали для меня, если у меня не былоdata-dismiss="modal"
атрибута на кнопке Отмена. Как и вы, мои потребности заключались в том, чтобы, возможно, закрывать / возможно, не закрывать, основываясь на некоторой дополнительной логике, поэтому нажатие на ссылку сdata-dismiss="modal"
прямым текстом не сработало бы. В итоге у меня появилась скрытая кнопка, с помощьюdata-dismiss="modal"
которой я мог программно вызывать обработчик кликов, поэтомуа затем внутри обработчиков щелчков для отмены, когда вам нужно закрыть модальный, который вы можете иметь
источник
Нам нужно позаботиться о пузырях событий. Нужно добавить одну строку кода
источник
Я понимаю, что это старый вопрос, но я обнаружил, что ни один из них не был действительно тем, что я искал точно. Кажется, это вызвано попыткой закрыть модальное окно до того, как оно закончится.
Мое решение было основано на ответе @ schoonie23, но мне пришлось изменить несколько вещей.
Сначала я объявил глобальную переменную в верхней части моего скрипта:
Тогда в моем модальном коде:
Тогда это: (Обратите внимание на имя «selected.bs.modal», указывающее, что модальное отображение полностью показано, а не «show», которое срабатывает при вызове события show. (Я изначально пытался просто «показывать», но это не сработало. )
Надеюсь, это спасет кого-то от лишних исследований. Я потратил немного в поисках решения, прежде чем придумал это.
источник
Я использовал этот код -
Скрыть модал с плавным эффектом, используя Fade Out.
источник
Если вы используете класс close в своих модалах, будет работать следующее. В зависимости от вашего варианта использования, я обычно рекомендую фильтровать только видимые модальные, если есть более одного модального класса с классом close.
источник
document.getElementById ( 'closeButton') нажмите (). // добавляем атрибут data-dismiss = "modal" к элементу в модале и присваиваем ему этот идентификатор
источник
Это плохая практика, но вы можете использовать эту технику, чтобы закрыть модальный режим, вызвав кнопку закрытия в javascript. Это закроет модальный режим через 3 секунды.
источник
это можно сделать только в HTML:
источник