Закрийте режим завантаження

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

$(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" у другому прикладі, що призведе до відмови кнопки Close.

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

// 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();

Цей код добре працював для мене, щоб закрити модальний (я використовую завантажувальний пристрій 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);

Ви можете бачити цю посилання, але якщо це посилання було видалено, прочитайте цей опис:

Виклик модалу з id myModal одним рядком JavaScript:

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

Параметри

Параметри можна передавати через атрибути даних або JavaScript. Для атрибутів даних додайте ім'я параметра до data- , як у data-backdrop = "" .

|-----------|-------------|--------|---------------------------------------------|
| 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 ('тумблер')

Вручну перемикає модальний. Повертається до абонента перед тим, як модальний режим фактично був показаний або прихований (тобто до того, як відбудеться подія показана.bs.modal або hidden.bs.modal).

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

.modal ('показ')

Вручну відкривається модаль. Повертається до абонента до того, як модальний фактично буде показаний (тобто до того, як відбудеться подія показаний.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...
})

Крім того, ви можете "натиснути" на "x", що закриває діалогове вікно. Наприклад:

$(".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 typecript):

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

Якщо я закликаю $ (modalId) .modal ('приховати'), він не працює, і я не знаю, чому

PS .: У моєму модалі я також зашифрував цей елемент кнопки з .close класом

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

іноді рішення не працює, тож вам належним чином видалити клас та додати дисплей css: жодне вручну.

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