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


432

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

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

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


Вы инициализируете свой модал с помощью $("#yourModal").modal()или $('.modal').modal()?
Мэр

Добавлено больше контекста выше. Спасибо за любые идеи @merv!
Ник Б

да ... это показало проблему. У @Tamil есть ваше решение.
Merv

Ответы:


706

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

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

5
Включение «переключения» вообще излишне. Просто убедитесь, что на модальном div нет класса 'hide'. Но да, опечатка была причиной проблемы. итак +1
мерв

22
Нет, он не работает должным образом, он скрывает модальный элемент, но элемент наложения фона все еще существует, вы должны использовать решение @Subodth.
Парик Тивари

1
@Pierre - рассмотрите возможность удаления вашего комментария, .modal (). Hide () - это не то же самое, что .modal ('hide'), вы будете путать людей.
Майкл Петерсон

2
Как сказал Парик, правильный ответ использует модальное ('hide')
MidouCloud

Это НЕ правильный ответ, проверьте ответ ниже!
user1467439

412

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

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

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

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

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


4
$ ( '# модальный') модальный ( 'переключение'). лучше скрыть модальную тень
хамзех.ханандэ

5
@ hamzeh.hanandeh, toggleсохраняет оверлей и не является решением. Вы всегда должны использовать либо showили hide.
ryanpcmcquen

81
$('#modal').modal('toggle'); 

или

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

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

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

$("#modal .close").click()

10
тот, что с hide () закрывает модальный, но оставляет фон размытым. $ ("# modal .close"). click () делает это отлично. Спасибо!
Шилпа

4
Это уже четко задокументировано, здесь не нужно подделывать щелчок, который кажется довольно дерзким. Правильный ответ: $ ('# modal'). Modal ('hide');
Майкл Петерсон

this -> $ ('# modal'). modal (). hide ();
ТАРА

У меня есть модель, которая не закрывается, $('#modal').modal('hide')однако я могу закрыть ее, используя, $('#modal').modal('toggle')но после закрытия отображается вертикальная полоса прокрутки. Так что для меня $('#modal').hide()отлично сработало, но я хочу знать, не создаст ли это каких-либо проблем? И я кодирую внутри, $('#modal .close').click()так что я не думаю, что смогу использовать его, чтобы закрыть модал.
Ахтишам


20
$("#your-modal-id").modal('hide');

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



10

это довольно хорошо, и это также работает в угловых 2

$("#modal .close").click()

У меня работает, а не $('#modal').modal('toggle');имеет никакого эффекта.
Тодор Тодоров

8

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

$('.modal').removeClass('show');

2
Намерения хорошие, но такой подход не всегда работает. К другим элементам страницы, в том числе <body>, добавлены классы, которые также должны быть возвращены. Лучший ответ - использовать 'hide'метод.
JustinStolle

7

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

data-dismiss="modal"

и не

data-dissmiss="modal"

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


6

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

// 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.

6

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

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


Или только $('.modal').modal('hide');сделаю.
Мэтт Рой

6

<!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/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(window).load(function(){
      $('#myModal').modal('show');
});
$(function () {
   $('#modal').modal('toggle');
});
</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>


Ошибка: «message»: «Uncaught TypeError: $ (...). Модальный не является функцией»
Иван Бурлуцкий

Да. У меня есть ошибка, если «Выполнить фрагмент кода» в Chrome (Linux Mint). Но это работает в Firefox.
Иван Бурлуцкий

1
@Ivan Burlutskiy, Спасибо, что сообщили мне, это проблема с jquery include, поэтому я исправил ее. теперь он отлично работает во всех браузерах.
Ганеш

5
   function Delete(){
       var id = $("#dgetid").val();
       debugger
       $.ajax({
           type: "POST",
           url: "Add_NewProduct.aspx/DeleteData",
           data: "{id:'" + id + "'}",
           datatype: "json",
           contentType: "application/json; charset=utf-8",
           success: function (result) {
               if (result.d == 1) {
                   bindData();
                   setTimeout(function(){ $('#DeleteModal').modal('hide');},1000);
               }
           }
       });
   };

Привет - спасибо за ваш ответ. Я отформатировал это как код (что было довольно просто - просто отступ первой строки немного больше). Тем не менее, я думаю, что только $('#DeleteModal').modal('hide');здесь уместно?
Rup


3

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

$("#modalID .close").click()

3

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

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

$('body').removeClass('modal-open')
$('.modal-backdrop').remove()  

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

Хорошо, так что в основном это удаляет класс modal-open, который закрывает модал. затем удаляет класс модал-фон, который удаляет сероватый покров модала
Orozcorp

3

Я закрыл модально программно с помощью этого трюка

Добавить кнопку в модальное с data-dismiss="modal"и скрыть кнопку с display: none. Вот как это будет выглядеть

<div class="modal fade" id="addNewPaymentMethod" role="dialog">
  <div class="modal-dialog">
   .
   .
   .
   <button type="button" id="close-modal" data-dismiss="modal" style="display: none">Close</button>
  </div>
</div>

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

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

document.getElementById('close-modal').click();

2

Этот код отлично работал для меня, чтобы закрыть модальный (я использую bootstrap 3.3)

$('#myModal').removeClass('in')

2

В моем случае главная страница, с которой был запущен мод начальной загрузки, начала не отвечать после использования $("#modal").modal('toggle');пути, но стала отвечать следующим образом:

$("#submitBtn").on("click",function(){
  $("#submitBtn").attr("data-dismiss","modal");
});

2

Это хорошо работает

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

Тем не менее, когда у вас есть несколько модов, накладывающихся друг на друга, это не эффективно, поэтому вместо этого это работает

data-dismiss="modal"

2

После некоторого теста я обнаружил, что для начальной загрузки модалу нужно подождать некоторое время, прежде чем выполнять $(.modal).modal('hide')после выполнения $(.modal).modal('show'). И я обнаружил, что в моем случае мне нужно как минимум 500 миллисекундный интервал между ними.
Итак, это мой тестовый пример и решение:

$('.modal-loading').modal('show');
setTimeout(function() {
  $('.modal-loading').modal('hide');
}, 500);

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

2

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

Вызовите модал с идентификатором myModal с одной строкой JavaScript:

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

Опции

Опции могут быть переданы через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data- , как в data-background = "" .

|-----------|-------------|--------|---------------------------------------------|
| Name      | Type        | Default| Description                                 |
|-----------|-------------|--------|---------------------------------------------|
| backdrop  | boolean or  | true   | Includes a modal-backdrop element.          |
|           | the string  |        | Alternatively, specify static for a         |
|           | 'static'    |        | backdrop which doesn't close the modal      |
|           |             |        | on click.                                   |
|           |             |        |                                             |
| keyboard  | boolean     | true   | Closes the modal when escape key is pressed.|   
|           |             |        |                                             |
| focus     | boolean     | true   | Puts the focus on the modal when initialized|       
|           |             |        |                                             |
| show      | boolean     | true   | Shows the modal when initialized.           |
|-----------|-------------|--------|---------------------------------------------|

методы

Асинхронные методы и переходы

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

Смотрите нашу документацию JavaScript для получения дополнительной информации.

.modal (варианты)

Активирует ваш контент как модальный. Принимает необязательные параметры объекта.

$('#myModal').modal({
   keyboard: false
})

.modal ( 'переключение')

Вручную переключает модал. Возврат к вызывающей стороне до того, как модал будет фактически показан или скрыт (то есть до того, как произойдет событие selected.bs.modal или hidden.bs.modal).

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

.modal ( 'шоу')

Вручную открывает модал. Возврат к вызывающей стороне до того, как модал был фактически показан (то есть до того, как произошло событие visible.bs.modal).

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

.modal ( 'скрыть')

Вручную скрывает модал. Возврат к вызывающей стороне до того, как модал был фактически скрыт (т.е. до того, как произошло событие hidden.bs.modal).

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

.modal ( 'handleUpdate')

Вручную перенастроить положение модала, если высота модала изменяется, когда он открыт (т. Е. В случае появления полосы прокрутки).

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

.modal ( 'отчуждать')

Уничтожает модальный элемент.

Мероприятия

Модальный класс Bootstrap предоставляет несколько событий для подключения к модальной функциональности. Все модальные события запускаются на самом модале (то есть на **). Тип Описание

|----------------|--------------------------------------------------------------|
| Event Type     | Description                                                  |
|----------------|--------------------------------------------------------------|
| show.bs.modal  | This event fires immediately when the **show** instance      |
|                | method is called. If caused by a click, the clicked element  |
|                | is available as the **relatedTarget** property of the event. | 
|                |                                                              |
| shown.bs.modal | This event is fired when the modal has been made visible to  |
|                | the user (will wait for CSS transitions to complete). If     |
|                | caused by a click, the clicked element is available as the   | 
|                | **relatedTarget** property of the event.                     |
|                |                                                              |
| hide.bs.modal  | This event is fired immediately when the **hide** instance   |
|                | method has been called.                                      |
|                |                                                              |
| hidden.bs.modal| This event is fired when the modal has finished being hidden |
|                | from the user (will wait for CSS transitions to complete).   |
|----------------|--------------------------------------------------------------|

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

0

Кроме того, вы можете «нажать» на «х», который закрывает диалог. Например:

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


0

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

<button type="button" class="btn btn-success" style="color:white"
    data-toggle="modal" data-target="#my-modal-to-show" >
    <i class="fas fa-plus"></i> Call MODAL
</button>

Таким образом, в моем коде, чтобы закрыть модальный (который имеет id = 'my-modal-to-show'), я вызываю эту функцию (в машинописном наборе Angular):

closeById(modalId: string) {
  $(modalId).modal('toggle');
  $(modalId+ ' .close').click();
}

Если я вызываю $ (modalId) .modal ('hide'), это не работает, и я не знаю почему

PS: в моём модале я тоже кодировал этот элемент кнопки с классом .close

<button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
    <span aria-hidden="true">&times;</span>
</button>

0

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

$("#modal").removeClass("in");
$("#modal").css("display","none");
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.