Как скрыть модал Bootstrap с помощью JavaScript?


282

Я читал посты здесь, на сайте 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>

1
$('#myModal').modal('hide');правильный синтаксис для закрытия / скрытия модальных с помощью id myModal(вы можете проверить это на странице документации Bootstrap ). Вы уверены, что у вас есть элемент с этим идентификатором на вашей странице? Кроме того, что вы пытаетесь достичь с помощью этого звонка? Ваша текущая реализация выполняет Ajax-запрос new_contact_pathи одновременно открывает модальное содержимое: #myModal- это то, что вы хотите?
Джулиан Д.

Привет, Джулиан. Я разместил разметку myModal выше, и там действительно есть div с id myModal. Я перепробовал $('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');( #в вашем комментарии отсутствует).
Джулиан Д.

1
Мой плохо печатать вместо того, чтобы копировать из реального кода. Реальный код гласит: $('#myModal').modal('hide'). J
jvillian

Вы можете попробовать использовать bootboxjs
md. Aisful Ахсан

Ответы:


495

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

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

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

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

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


Второй абзац был тем, что я искал. Двойные идентификаторы делали мои модалы, чтобы не показывать правильно во второй раз.
Матиас

Это исправило проблему для меня. Спасибо.
Finchy70

77

близкий бутстрап модальные вы можете передать «шкура» в качестве опции для модального метода как последуйте

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

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

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

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


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

47

Я использую Bootstrap 3.4 Для меня это не работает

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

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

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

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


2
Было бы лучше, если вы используете $ (". Modal-background"). Remove ();
Бладхаунд

1
это представит новые ошибки. Пожалуйста, используйте рекомендовать методы,
Бенджамин Экштейн

JQuery ( 'модальный-фон'.) нажмите ().

немного глючит но наверняка работает. Приведенное ниже решение Мануэля Фернандо отлично сработало для меня.
Мунам Юсуф

@ Уминго, пожалуйста, порекомендуйте метод, если упомянутые здесь не годятся, и вы знаете один.
продолжительность

47

Лучшая форма, чтобы скрыть и показать модал с начальной загрузкой

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

Лучший ответ на сегодняшний день. Имитация поведения с помощью кликов, jQuery fadeOut или css может привести к смещению в долгосрочной перспективе.
Джорджо Темпеста

43

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

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

1
Я читал еще одну проблему, в которой предполагалось, что проблема может заключаться в том, что в элементе есть атрибут data-dismiss, а затем попытка вызвать его из javascript
Femtosecond

Огромное Огромное спасибо Мануэлю, это после того, как много поисков решило мою проблему, $ ('# MyModelId'). Modal ('hide'); $ ("[data-dismiss = modal]"). trigger ({type: "click"}); что я хотел закрыть модал на успехе ajax .... очень большое спасибо мой дорогой
abdelrhman raafat

22
$('#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

это сработало, но сломало модальное, если я открою его снова, модальное больше не прокручивается
kosas

21

Я нашел правильное решение, вы можете использовать этот код

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

лучшее решение на сегодня
Kosas

превосходно просто лучший +1
MooMoo

11

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

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

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

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

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


11

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

Чтобы решить эту проблему, я связал скрытое событие с удалением 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

1
но не могли бы вы рассказать мне о this.render()его показе undefined is not a functionв моей хромированной консоли.
Анил Кумар Пандей

9

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

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

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


8

Мы обнаружили, что между вызовом нашего серверного кода и возвратом к успешному обратному вызову произошла лишь небольшая задержка. Если мы поместим вызов на сервер в $("#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он вызывается, он скрывает модальный режим, а затем вызывает код на стороне сервера.


6

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

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

6

Вот документация: http://getbootstrap.com/javascript/#modals-methods

Вот метод: $ ('# myModal'). Modal ('hide')

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

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

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



5

Даже у меня такие же проблемы. Это мне очень помогло

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


4

$('#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 с классом «modal», и я динамически добавил в него файл cshtml, например, модальное тело, и добавил щелчок на кнопке этого тело, как только модал будет показан. одного вызова ".modal ('hide)" было недостаточно, как вы указали: "data-dismiss =" modal "" на кнопке вызова была сделкой !!! ты
Csharpest

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

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


2

Я использовал этот код -

Скрыть модал с плавным эффектом, используя Fade Out.

$('#myModal').fadeOut();

$('.modal-backdrop').fadeOut();

$('.modal-open').css({'overflow': 'visible'});

1

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

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

0

document.getElementById ( 'closeButton') нажмите (). // добавляем атрибут data-dismiss = "modal" к элементу в модале и присваиваем ему этот идентификатор


-1

Это плохая практика, но вы можете использовать эту технику, чтобы закрыть модальный режим, вызвав кнопку закрытия в 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>

-2

это можно сделать только в HTML:

data-dismiss="modal"

<button type="button" class="btn btn-secondary" data-dismiss="modal">Save</button>

@KevinFrancis Потому что вопрос в том, чтобы найти программный способ сделать это из контроллера, а не как сделать кнопку, которая это делает.
GreenAsJade
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.