Закрыть Bootstrap Модал

248

У меня есть модальное диалоговое окно bootstrap, которое я хочу показать сначала, а затем, когда пользователь нажимает на страницу, он исчезает. У меня есть следующее:

$(function () {
   $('#modal').modal(toggle)
});

 <div class="modal" id='modal'>
     <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Error:</h3>
        </div>
        <div class="modal-body">
        <p>Please correct the following errors:</p>
        </div>
     </div>
 </div>

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

  • 0
    Вы инициализируете свой $("#yourModal").modal() с помощью $("#yourModal").modal() или $('.modal').modal() ?
  • 0
    Добавлено больше контекста выше. Спасибо за любые идеи @merv!
Показать ещё 1 комментарий
Теги:
modal-dialog

14 ответов

416
Лучший ответ

Поместите modal('toggle') вместо modal(toggle)

$(function () {
   $('#modal').modal('toggle');
});
Поделиться
  • 5
    Включение «переключателя» вообще излишне. Просто убедитесь, что на модальном div нет класса 'hide'. Но да, опечатка была причиной проблемы. так +1
  • 18
    Нет, он не работает должным образом, он скрывает модальный элемент, но элемент наложения фона все еще существует, вы должны использовать решение @Subodth.
Показать ещё 3 комментария
253

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

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

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

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

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

Поделиться
  • 4
    $ ( '# Модальный') модальный ( 'переключение'). лучше скрыть модальную тень
  • 5
    @ hamzeh.hanandeh, toggle сохраняет оверлей и не является решением. Вы всегда должны использовать либо show либо hide .
35 
$('#modal').modal('toggle');

или

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

должен работать.

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

$("#modal .close").click()
Поделиться
  • 9
    тот, что с hide () закрывает модальный, но оставляет фон размытым. $ ("# modal .close"). click () делает это отлично. Спасибо!
  • 5
    Ваш последний вариант сработал для меня. Благодарю.
Показать ещё 3 комментария
19

это сработало для меня:

<span class="button" , data-dismiss="modal" aria-label="Close">cancel</span>

используйте эту ссылку modal close

Поделиться
11 
$("#your-modal-id").modal('hide');

Запуск этого вызова через класс ($(".my-modal")) не будет работать.

Поделиться
7

Мои пять центов в этом случае - это то, что я не хочу, чтобы нужно было нацеливать bootstrap modal на id и видеть, что должен быть только один модальный за один раз следующее должно быть достаточно, чтобы удалить модальный как переключатель может быть опасным:

$('.modal').removeClass('show');
Поделиться
  • 2
    Намерения хорошие, но такой подход не всегда работает. К другим элементам страницы, включая <body> , добавлены классы, которые также должны быть возвращены. Лучший ответ - использовать метод 'hide' .
5

этот файл довольно хорош, и он также работает в angular 2

$("#modal .close").click()
Поделиться
  • 0
    У меня работает вместо $('#modal').modal('toggle'); который не имеет никакого эффекта.
5

В некоторых случаях ошибкой ввода может быть преступник. Например, убедитесь, что у вас есть:

data-dismiss="modal"

а не

data-dissmiss="modal"

Обратите внимание на двойной "ss" во втором примере, который приведет к сбою кнопки "Закрыть".

Поделиться
4

Мы можем закрыть модальное всплывающее окно следующими способами:

// We use data-dismiss property of modal-up in html to close the modal-up,such as

<div class='modal-footer'><button type='button' class="btn btn-default" data-dismiss='modal'>Close</button></div>

 // We can close the modal pop-up through java script, such as

 <div class='modal fade pageModal'  id='openModal' tabindex='-1' data-keyboard='false' data-backdrop='static'>

    $('#openModal').modal('hide'); //Using modal pop-up Id.
    $('.pageModal').modal('hide'); //Using class that is defined in modal html.
Поделиться
3 

 
    $(window).load(function(){
        $('#myModal').modal('show');
    });


$(function () {
   $('#modal').modal('toggle');
});
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></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">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>
Поделиться
  • 0
    Ошибка: «message»: «Ошибка Uncaught TypeError: $ (...). Модал не является функцией»
  • 0
    Вы получили эту ошибку?
Показать ещё 2 комментария
1

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

используйте приведенный выше код, чтобы скрыть фон модальности, если вы используете несколько модальных всплывающих окон на одной странице.

Поделиться
1

Использование modal.hide только скроет модальный. Если вы используете оверлей под модальным, он все равно будет там. используйте щелчок, чтобы фактически закрыть модальный и удалить наложение.

$("#modalID .close").click()
Поделиться
  • 0
    это правильно
0

Другой способ сделать это - сначала удалить класс modal-open, который закрывает модальный. Затем вы удаляете класс модальный фон, который удаляет сероватую обложку модального.

Можно использовать следующий код:

$('body').removeClass('modal-open')
$('.modal-backdrop').remove()
Поделиться
  • 0
    Пожалуйста, постарайтесь не просто выводить код в качестве ответа и попытаться объяснить, что он делает и почему. Ваш код может быть неочевиден для людей, которые не имеют соответствующего опыта программирования. Пожалуйста, отредактируйте свой ответ, включив в него разъяснения, контекст и постарайтесь упомянуть в своем ответе любые ограничения, предположения или упрощения.
  • 0
    ОК, так что в основном это удаляет класс modal-open, который закрывает модал. затем удаляет класс модального фона, который удаляет сероватое покрытие модального
0

Кроме того, вы можете "click" на "x", который закрывает диалог. Например:.

$(".ui-dialog-titlebar-close").click();

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню