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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Возможно, он не изящный, но он работает

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

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

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

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

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

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

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

(Ссылаясь на Bootstrap 3), Чтобы скрыть использование модальных данных: $('#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

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

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

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

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

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

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

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

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

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

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

Вот способ:   $ ( '# MyModal'). Модальный ( 'скрыть')

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

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

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

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

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

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

$('.modal-backdrop').hide(); // for black background
$('body').removeClass('modal-open'); // For scroll run
$('#modal').modal('hide'); 

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

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

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

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

Затем в моем модальном коде:

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

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

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

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

Нам нужно позаботиться о пузырьках событий. Нужно добавить одну строку кода

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

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

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

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