Вопрос по twitter-bootstrap, javascript, modal-dialog – Как скрыть модал Bootstrap от JavaScript?

250

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

У меня есть модальный Bootstrap, который я открываю из помощника link_to следующим образом:

<code><%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal",  class: "btn btn-primary"} %>
</code>

В моемContactsController.create действие, у меня есть код, который создаетContact затем проходит вcreate.js.erb, Вcreate.js.erbУ меня есть некоторый код обработки ошибок (смесь ruby и javascript). Если все идет хорошо, я хочу закрыть модал.

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

Я пытался$('#myModal').modal('hide'); и это не имеет никакого эффекта. Я также пытался$('#myModal').hide(); который заставляет модал отклонить, но оставляет фон.

Любое руководство о том, как закрыть модальный и / или удалить фон изнутриcreate.js.erb?

Edit

Вот разметка для myModal:

<code><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>
</code>
Вы можете попробовать использовать bootboxjs md. ariful ahsan
Я думаю, это просто опечатка, но вызов должен быть$('#myModal').modal('hide');(есть# отсутствует в вашем комментарии). Julian D.
Мой плохо печатать вместо того, чтобы копировать из реального кода. Фактический код гласит:$('#myModal').modal('hide'), J jvillian
Привет, Джулиан. Я разместил разметку myModal выше, и там действительно есть div с idmyModal, Я перепробовал$('myModal').modal('hide') и все равно ничего хорошего. Гектометр С точки зрения того, что я пытаюсь выполнить, я думаю, что было бы неправильно использовать помощник link_to. Я заменил это на:<a data-toggle="modal" href="#myModal" class="btn btn-primary">Add Contact</a> поскольку мне действительно не нужен звонокnew_contact_path, Я просто хочу, чтобы модал открылся, а затем имел дело с пользовательским вводом. Спасибо что нашли время ответить. Я посмотрю, смогу ли я с этим разобраться. jvillian
$('#myModal').modal('hide'); правильный синтаксис для закрытия / скрытия модальных с идентификаторомmyModal (вы можете проверить это наBootstrap documentation page). Вы уверены, что у вас есть элемент с этим идентификатором на вашей странице? Кроме того, что вы пытаетесь сделать с помощью этого звонка? Ваша текущая реализация выполняет Ajax-запрос кnew_contact_path и одновременно открывает модал с содержимым#myModal & # X2013; это то, чего ты хочешь? Julian D.

Ваш Ответ

19   ответов
19

// SHOW
$('#ModalForm').modal('show');
// HIDE
$('#ModalForm').modal('hide');
3

$('#modal').modal('hide'); и его варианты не работали для меня, если у меня не былоdata-dismiss="modal" в качестве атрибута на кнопку Отмена. Как и вы, мои потребности заключались в том, чтобы закрывать / возможно, а не закрывать, основываясь на некоторой дополнительной логике, поэтому щелкнув ссылку сdata-dismiss="modal" откровенно не делал бы. В итоге у меня была скрытая кнопка сdata-dismiss="modal" что я мог бы программно вызвать обработчик щелчка, так

a id="hidden-cancel" class="hide" data-dismiss="modal">;/a>
;a class="close btn">Cancel;/a>

а затем внутри обработчиков щелчков для отмены, когда вам нужно закрыть модальное, которое вы можете иметь

$('#hidden-cancel').click();
В моем случае (страница asp net razor) это было похоже на OP: у меня был несколько пустой div с классом «модальный». и динамически добавил файл cshtml к нему, например, модальное тело и добавил щелчок к кнопке этого тела, как только модальное будет показано. вызов ".modal (" скрыть) " одного было недостаточно, как вы указали: «data-dismiss =» modal »& quot; на кнопку вызова была сделка !!! ти
4

http://getbootstrap.com/javascript/#modals-methods

Вот метод:     $ (& APOS; # myModal & APOS;) модально. (& APOS; скрыть & APOS;)

Если вам нужно несколько раз открыть модал с разным контентом, предлагаю добавить (у вас основные js):

$('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
    });

Таким образом, вы очистите содержимое для следующего открытия и избежите кеширования

8

$('#myModal').modal('hide'); скорее всего, проходит через эту функцию и попадает в линию

if (!this.isShown || e.isDefaultPrevented()) return

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

if (!(typeof this.isShown == 'undefined') && (!this.isShown || e.isDefaultPrevented())) return

Это, казалось, решило проблему по большей части. Если фон все еще остается, вы всегда можете добавить вызов, чтобы вручную удалить его после вызова скрытия$('.modal-backdrop').remove();, Совсем не идеально, но работает.

442

используйте консоль браузера, чтобы попробовать

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

Если это работает (и модальное закрытие), то вы знаете, что ваш закрытый Javascriptnot отправляется с сервера в браузер правильно.

Если это не работает, то вам необходимо дополнительно выяснить у клиента, что происходит. Например, убедитесь, что нет двух элементов с одинаковым идентификатором. Например, это работает в первый раз после загрузки страницы, но не во второй раз?

Консоль браузера: Firebug для Firefox, консоль отладки для Chrome или Safari и т. Д.

Второй абзац был тем, что я искал. Дублирующиеся идентификаторы заставляли мои модалы не отображаться правильно во второй раз.
16
$('#modal').modal('hide'); 
//hide the modal

$('body').removeClass('modal-open'); 
//modal-open class is added on body so it has to be removed

$('.modal-backdrop').remove();
//need to remove div with modal-backdrop class
Это работает для меня как очарование .. спасибо @shivam
6

что я позвонил после того, как "показанный" произошел обратный вызов:

$('#myModal').on('shown', function () {
      $('#myModal').modal('hide');
})

Это гарантировало, что модальный режим был загружен до вызова hide ().

4

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

$("a.close").on("click", function(e){
  $("#modal").modal("hide");
  e.stopPropagation();
});
3

$("[data-dismiss=modal]").trigger({ type: "click" });
3

ода

$("#savechanges").on("click", function (e) {
        $("#userModal").modal("hide");
        e.stopPropagation(); //This line would take care of it
    });
3

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

Мое решение было основано на ответе @ schoonie23, но мне пришлось изменить несколько вещей.

Сначала я объявил глобальную переменную в верхней части моего скрипта:

<script>
    var closeModal = false;
    ...Other Code...

Тогда в моем модальном коде:

$('#myModal').on('show.bs.modal', function (event) {
    ...Some Code...
    if (someReasonToHideModal) {
        closeModal = true;
        return;
    }
    ...Other Code...

Тогда это: (Обратите внимание на имя «selected.bs.modal», указывающее, что модал полностью показывал, а не «show», которое срабатывает при вызове события show. не работа.)

$('#myModal').on('shown.bs.modal', function (event) {
    if (closeEditModal) {
        $('#myModal').modal('hide');
        closeModal = false;
    }
});

Надеюсь, это спасет кого-то от лишних исследований. Я потратил немного в поисках решения, прежде чем придумал это.

0

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

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
window.onload=function()
{
setInterval(function(){ 

$("#closemodal").click();
}, 3000);

}
</script> 
</head>
<body>

   <div class="container">
 <h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal"   data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

    <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal" id="closemodal">Close</button>
    </div>
  </div>

</div>
</div>

 </div>

</body>
</html>
69

закрыть бутстрапmodal ты можешь пройти'hide' как вариант для модального метода, как следует

$('#modal').modal('hide');

Пожалуйста, посмотрите на работувозиться здесь

bootstrap также предоставляет события, которые вы можете подключитьмодальный функциональность, например, если вы хотите запустить событие, когда модал закончен, скрыт от пользователя, которого вы можете использоватьhidden.bs.modal событие вы можете прочитать больше о модальных методах и событиях здесь вДокументация

Если ни один из указанных выше методов не работает, присвойте своей кнопке закрытия идентификатор и нажмите кнопку «Закрыть».

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

что между вызовом нашего серверного кода и возвратом к успешному обратному вызову произошла лишь небольшая задержка. Если мы завернули вызов на сервер в$("#myModal").on('hidden.bs.modal', function (e) обработчик, а затем называется$("#myModal").modal("hide"); метод, браузер будет скрывать модальные и затем вызывать код на стороне сервера.

Опять не элегантно, но функционально.

 function myFunc(){
        $("#myModal").on('hidden.bs.modal', function (e) {
            // Invoke your server side code here.
        });
        $("#myModal").modal("hide");
 };

Как вы можете видеть, когдаmyFunc вызывается, он будет скрывать модальные и затем вызывать код на стороне сервера.

43

$('#myModal').modal('hide')

В отчаянии я сделал это:

$('#myModal').hide();
$('.modal-backdrop').hide();

Может быть, это не элегантно, но работает

JQuery (& APOS; .modal-фон & APOS;). нажмите ();
это представит новые ошибки. пожалуйста, используйте рекомендуемые методы,
@ Уминго, пожалуйста, порекомендуйте метод, если упомянутые здесь не годятся, и вы знаете один.
Было бы лучше, если бы вы использовали $ (& quot; .modal-background & quot;). Remove ();
немного глючит но наверняка работает.Manuel FernandoРешение, приведенное ниже, отлично сработало для меня.
31

и эта строка кода действительно помогает мне.

$("[data-dismiss=modal]").trigger({ type: "click" });
Я читал еще одну проблему, в которой предполагалось, что проблема может быть в атрибуте data-dismiss в элементе, а затем в попытке запустить его из JavaScript.
8

$('#modal').modal('hide'), Но причина, по которой фон оставался (для меня), заключалась в том, что я уничтожал DOM для модального вида перед «скрыть». законченный.

Чтобы решить эту проблему, я связал скрытое событие с удалением DOM. В моем случае:this.render()

var $modal = $('#modal');

//when hidden
$modal.on('hidden.bs.modal', function(e) { 
  return this.render(); //DOM destroyer
});

$modal.modal('hide'); //start hiding
но не могли бы вы рассказать мне оthis.render() его показundefined is not a function в моей хромированной консоли.
3
$('.modal-backdrop').hide(); // for black background
$('body').removeClass('modal-open'); // For scroll run
$('#modal').modal('hide'); 
14

$('.close').click(); 

Похожие вопросы