Закрыть 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>

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

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

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

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

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

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

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

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

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

или

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

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

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

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

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

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

используйте эту ссылку модальный закрыть

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

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

Попробуй это

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

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

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

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

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

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

data-dismiss="modal"

и не

data-dissmiss="modal"

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

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

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

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

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

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

ты можешь использовать;

$('#' + $('.modal.show').attr('id')).modal('hide');

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

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

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

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

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

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

Добавить кнопку в модальное с 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();

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

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

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

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

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

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

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

data-dismiss="modal"

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

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

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

Вызовите модал с идентификатором 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...
})

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

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

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

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

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

$("#modal").removeClass("in");
$("#modal").css("display","none");