Модальний фон Twitter bootstrap не зникає

Я використовую діалогове вікно модального завантаження Twitter. Коли я натискаю кнопку подання у діалоговому вікні модального завантаження, він надсилає запит AJAX. Моя проблема полягає в тому, що модальний фон не зникає. Діалогове вікно Modal не зникає правильно, але натомість "модальний фон", який створює непрозорість на екрані, залишається

Що я можу зробити?

Переконайтесь, що ви не замінюєте контейнер, що містить фактичне модальне вікно, коли ви виконуєте запит AJAX, оскільки Bootstrap не зможе знайти посилання на нього при спробі його закрити. У повному обробнику Ajax вийміть модальний модуль та замініть дані.

Якщо це не працює, ви завжди можете змусити його піти, зробивши наступне:

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

Переконайтеся, що ваш початковий заклик $.modal()застосувати модальну поведінку не передає більше елементів, ніж ви задумали. Якщо це станеться, воно в кінцевому підсумку створить модальний екземпляр, доповнений елементом тла, для елемента EACH у колекції. Отже, це може виглядати так, що задній фон залишився, коли насправді ви дивитесь на один із дублікатів.

У моєму випадку я намагався створити модальний вміст на ходу за допомогою такого коду:

myModal = $('<div class="modal">...lots of HTML content here...</div><!-- end modal -->');
$('body').append(myModal);
myModal.modal();

Тут коментар HTML після </div>тега, що закривається, означав, що myModal насправді являє собою колекцію jQuery з двох елементів - діва та коментаря. Обидва вони були покірно перетворені на модалі, кожен зі своїм елементом задника. Звичайно, модал, зроблений із коментаря, був непомітний, окрім тла, тому коли я закрив справжній модал (діва), він виглядав так, що фон залишився позаду.

Я просто витратив занадто довго на цю проблему :)

Хоча інші надані відповіді є корисними та справедливими, мені здалося трохи безладним, щоб ефективно відтворити модальні функції приховування від Bootstrap, тому я знайшов більш чисте рішення.

Проблема полягає в тому, що існує ланцюжок подій, які трапляються, коли ви телефонуєте

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

Коли ви заміните купу HTML в результаті запиту AJAX, події, що переховуються, не завершуються. Однак Bootstrap запускає подію, коли все закінчено , і ви можете підключитись до цього так:

$("#myModal").modal('hide').on('hidden.bs.modal', functionThatEndsUpDestroyingTheDOM);

Сподіваюся, це корисно!

Вставте у свою дію кнопку цього:

data-backdrop="false"

і

data-dismiss="modal" 

приклад:

<button type="button" class="btn btn-default" data-dismiss="modal">Done</button>

<button type="button" class="btn btn-danger danger" data-dismiss="modal" data-backdrop="false">Action</button>

якщо ви введете ці дані attr, .modal-фон не з’явиться. Документація про це за посиланням: http://getbootstrap.com/javascript/#modals-usage

Якщо ви використовуєте копію та вставити з самого сайту getboostrap у селектор, що генерується у форматі HTML, переконайтесь, що ви видалили коментар '<! - /.modal ->'. Bootstrap плутається і вважає, що коментар є другим модальним елементом. Це створює ще одну краплю назад для цього "другого" елемента.

Я знаю, що це дуже стара публікація, але це може допомогти. Це дуже маленьке вирішення мене

$('#myModal').trigger('click');

Ось це, це повинно вирішити питання

У мене виникло подібне питання: у моєму модальному вікні у мене дві кнопки: "Скасувати" та "ОК". Спочатку обидві кнопки закривали б модальне вікно шляхом виклику $('#myModal').modal('hide')(при цьому "OK" раніше виконував якийсь код), і сценарій був би таким:

1. Відкрийте модальне вікно
2. Виконайте деякі операції, потім натисніть кнопку «ОК», підтвердіть їх і закрийте модальний
3. Знову відкрийте модал та відхиліть, натиснувши "Скасувати"
4. Повторно відкрийте модальний режим, натисніть знову на «Скасувати» ==> фон вже недоступний!

що ж, мій колега з наступного столу врятував мені день: замість того $('#myModal').modal('hide'), щоб викликати , дайте своїм кнопкам атрибут data-dismiss="modal"та додайте подію "клік" до кнопки "Надіслати". У моїй проблемі код HTML (ну, TWIG) для кнопки:

<button id="modal-btn-ok" class="btn" data-dismiss="modal">OK</button>
<button id="modal-btn-cancel" class="btn" data-dismiss="modal">Cancel</button>

і у своєму коді JavaScript я маю:

$("#modal-btn-ok").one("click", null, null, function(){
    // My stuff to be done
});

при цьому жодна подія "натискання" не приписується кнопці "Скасувати". Тепер модальний режим закривається належним чином і дозволяє мені знову грати зі "звичайною" сторінкою. Насправді здається, що це data-dismiss="modal"повинен бути єдиний спосіб вказати, що кнопка (або будь-який елемент DOM) повинна закривати модаль Bootstrap. .modal('hide')Метод , здається, ведуть себе не цілком контрольованим чином.

Сподіваюсь, це допомагає!

Ця проблема також може виникнути, якщо ви ховаєте, а потім занадто швидко показуєте модальне вікно. Про це згадувалося в іншому місці для запитання, але я наведу детальніше нижче.

Проблема пов'язана з тимчасовим та перехідним періодом. Якщо ви покажете модал до завершення переходу зникаючого попереднього модалу, ви побачите цю стійку проблему заднього тла (модальний фон залишиться на екрані, у вашому образі). Bootstrap явно не підтримує декілька одночасних модалів, але це, здається, є проблемою, навіть якщо модальний режим, який ви ховаєте, і мода, який ви показуєте, однакові.

Якщо це правильна причина вашої проблеми, ось кілька варіантів пом'якшення проблеми. Варіант №1 - це швидкий і простий тест, який дозволяє визначити, чи дійсно час зникнення часу переходу є причиною вашої проблеми.

1. Вимкнення анімації Fade для модального (вилучіть клас "fade" з діалогового вікна)
2. Оновіть текст модалу, замість того, щоб ховати та повторно показувати його.
3. Виправте час, щоб він не відображав модальний режим, поки він не завершить приховування попереднього модалу. Для цього використовуйте події модалу. http://getbootstrap.com/javascript/#modals-events

Ось кілька пов’язаних повідомлень про відстеження завантажувальної програми. Можливо, що більше повідомлень трекера, ніж я перелічував нижче.

• https://github.com/twbs/bootstrap/isissue/735
• https://github.com/twbs/bootstrap/isissue/2839
• https://github.com/twbs/bootstrap/isissue/19385

.modal ('ховати')

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

Тож замість

$('#myModal').modal('hide');
$('#someOtherSelector').trigger('click');

робити

$('#myModal').modal('hide');
$('#myModal').on('hidden.bs.modal', function() {
   $('#someOtherSelector').trigger('click');
});

Тож ви обов’язково дочекаєтесь завершення події "приховати".

Ще одна можлива помилка, яка може призвести до цієї проблеми,

Переконайтесь, що ви не включали bootstrap.jsсценарій не один раз на свою сторінку!

Навіть я зіткнувся з подібною проблемою, у мене були наступні дві кнопки

<button id="confirm-delete-btn" >Yes, Delete this note.</button>
<button id="confirm-delete-cancel" data-dismiss="modal">No</button>

Я хотів виконати деяку операцію ajax і на успіх цієї операції ajax закрити модальний. Отже ось що я зробив.

$.ajax({
        url: '/ABC/Delete/' + self.model.get("Id")
            , type: 'DELETE'
            , success: function () {                    
                setTimeout(function () {
                    self.$("#confirm-delete-cancel").trigger("click");
                }, 1200);
            }
            , error: function () {}
        });

Я запустив подію натискання кнопки "Ні", яка мала data-dismiss="modal"властивість. І це спрацювало :)

використання:

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

Джерело

Це рішення призначене для Ruby on Rails 3.x та файлу js.erb, який відновлює частину DOM, включаючи модальний. Він працює незалежно від того, чи був виклик ajax з модального або з іншої частини сторінки.

if ($("#my-modal").attr("aria-hidden") === "false") {
  $("#my-modal").modal('hide').on('hidden.bs.modal', function (event) {
    functionThatEndsUpDestroyingTheDOM();
  });
} else {
  functionThatEndsUpDestroyingTheDOM();
}

Дякуємо @BillHuertas за вихідну точку.

$ ('# myModal'). тригер ('клік');

Це працювало для мене. Він не закривається, тому що при відкриванні спливаючого вікна він запускає 2 або 3 модальні фони. Отже, коли ви робите $ ('# myModal')). Modal ('ховати'); це впливає лише на один модальний фон і залишається спокій.

проблема оновлення панелі.

Моя проблема була пов’язана з розміщенням панелі оновлення. У мене був весь модал у панелі оновлень. Якщо ви оголосили модальний режим поза панеллю оновлення і просто скажете модальне тіло на панелі оновлення, то $ ('# myModalID'). Modal ('приховати'); працювали.

Ще одна точка зору на це питання. (Я використовую bootstrap.js версії 3.3.6)

Я помиляюся ініціалізувати модальний режим вручну в javascript:

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

і за допомогою

data-toggle="modal"

у цій кнопці, як приклад нижче (показано в документі)

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

тому результат його створення два екземпляри

<div class="modal-backdrop fade in"></div>

додати до тіла мого html, коли відкрити модальний. Це може бути причиною закриття модалу за допомогою функції:

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

він видаляє лише один екземпляр фону (як показано вище), щоб фон не зник. Але він зник, якщо ви використовуєте data-dismiss="modal"додавання на html як показ у bootstrap doc.

Таким чином, рішення моєї проблеми полягає в тому, щоб ініціалізувати модальний тільки вручну в javascript і не використовувати атрибут даних. Таким чином я можу як закрити модальний вручну, так і за допомогою data-dismiss="modal"функцій.

Сподіваюся, це допоможе, якщо ви зіткнулися з тією ж проблемою, що і я.

FYI на випадок, якщо хтось все-таки наткнеться на це ... Я витратив близько 3 годин, щоб виявити, що найкращий спосіб зробити це наступним чином:

$("#my-modal").modal("hide");
$("#my-modal").hide();
$('.modal-backdrop').hide();
$("body").removeClass("modal-open");

Ця функція закриття модалу дуже неінтуїтивна.

Додавання data-dismiss="modal"будь-яких кнопок у моєму модалі працювало на мене. Я хотів, щоб моя кнопка викликала функцію з кутовим, щоб запустити виклик Ajax І закрити модальний, тому я додав функцію .toggle()в межах функції, і вона добре працювала. (У моєму випадку я використовував bootstrap modalі використовував якийсь angular, а не фактичний модальний контролер).

<button type="button" class="btn btn-primary" data-dismiss="modal"
ng-click="functionName()"> Do Something </button>

$scope.functionName = function () {
angular.element('#modalId').toggle();
  $.ajax({ ajax call })
}

У мене була така ж проблема. Я виявив, що це відбувається через конфлікт між Bootstrap та JQueryUI.

Обидва використовують клас "закрити". Зміна класу в тому чи іншому виправляє це.

Використання toggle замість приховування вирішило мою проблему

Переконайтесь, що ви не використовуєте один і той же елемент Id / class в іншому місці для елемента, не пов'язаного з модальним компонентом.

Тобто .. якщо ви ідентифікуєте ваші кнопки, які запускають модальні спливаючі вікна, використовуючи назву класу 'myModal', переконайтесь, що немає пов'язаних елементів, що мають таке саме ім’я класу.

Після застосування рішення з найвищим рейтингом у мене виникла проблема, що він порушує майбутні модалі, що відкриваються належним чином. Я знайшов своє рішення, яке працює добре

        element.on("shown.bs.modal", function () {
            if ($(".modal-backdrop").length > 1) {
                $(".modal-backdrop").not(':first').remove();
            }
            element.css('display', 'block');
        });

У мене була така ж проблема при спробі подати форму. Рішенням було змінити тип кнопки з submitна, buttonа потім обробити подію натискання кнопки так:

'click .js-save-modal' () {
    $('#myFormId').submit();
    $('#myModalId').modal('hide');
}

У проекті .net MVC4 у ​​мене з'явилося модальне спливаюче вікно (bootstrap 3.0) всередині Ajax.BeginForm (OnComplete = "addComplete" (додатковий код видалено)). Всередині javascript "addComplete" у мене був такий код. Це вирішило моє питання.

$ ('# moreLotDPModal'). hid ();

$ ("# moreLotDPModal"). data ('bs.modal'). isShown = false;

$ ('body'). removeClass ('modal-open');

$ ('. modal-backdrop'). видалити ();

$ ('# moreLotDPModal'). deleteClass ("в");

$ ('# moreLotDPModal'). attr ('aria-hidden', "true");

У мене був цей самий самий випуск.

Однак я використовував bootbox.js, тому це могло бути щось спільне з цим.

Так чи інакше, я зрозумів, що проблема викликана тим, що є елемент з тим самим класом, що і його батьків. Коли один з цих елементів використовується для прив'язки функції клацання для відображення модального режиму, тоді виникає проблема.

саме це викликає проблему:

<div class="myElement">
    <div class="myElement">
        Click here to show modal
    </div>
</div>

змініть його, щоб елемент, на який натискали, не мав такого ж класу, як його батьків, будь-який з дітей або будь-який інший предк. Це, мабуть, є хорошою практикою робити це взагалі, коли зв'язують функції клацання.

Я працюю з Метеором, і у мене просто така ж проблема. Причиною моєї помилки було таке:

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

Як ви бачите, я додав модалі в іншому, тож коли мій модал оновив контактну інформацію, якщо був інший стан. Це призвело до того, що модальний шаблон залишився поза DOM безпосередньо перед тим, як він закриється.

Рішення: перемістіть модаль із if-else:

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

//Create modal appending on body
myModalBackup = null;
$('#myModal').on('hidden.bs.modal', function(){
       $('body').append(myModalBackup.clone());
    myModalBackup = null;
});

//Destroy, clone and show modal
myModalBackup = $('#myModal').clone();
myModalBackup.find('.modal-backdrop').remove();
$('#myModal').modal('hide').remove();
myModalBackup.find('.info1').html('customize element <b>1</b>...');
myModalBackup.find('.info2').html('customize element <b>2</b>...');                             
myModalBackup.modal('show');

скрипка -> https://jsfiddle.net/o6th7t1x/4/

початкове значення вашого атрибута фонового зображення може бути

"статичний", "справжній", "хибний".

static та true додають модальну тінь, тоді як false - відключає тінь, тому потрібно просто змінити це значення першим клацанням на false. подобається це:

$(document).on('ready',function(){
	
	var count=0;
	
$('#id-which-triggers-modal').on('click',function(){
		
		if(count>0){
		
			$(this).attr('data-backdrop','false')
		}
		count++;
});


});

У мене виникла проблема заморожування модального екрана, але дещо інший сценарій: Коли відображалися два режими "назад до спини". наприклад, Перший попросить підтвердження зробити щось, і після натискання кнопки "підтвердити" дія буде наштовхнутись на помилку, а другий модал буде відображатися для появи спливаючого повідомлення про помилку. 2-й модальний фон заморозив би екран. Не було зіткнень у іменах класів чи ідентифікаторах елементів.

Спосіб усунення проблеми полягав у тому, щоб дати браузеру достатньо часу, щоб вирішити модальний фон. Замість того, щоб негайно вживати дій після натискання кнопки «підтвердити», дайте браузеру сказати 500 мс, щоб приховати 1-й модал та очистити тло тощо - тоді вживати заходів, які в кінцевому підсумку відображатимуть модаль помилки.

<button type="button" class="btn btn-red" data-dismiss="modal" on-tap="_dialogConfirmed">Confirm</button>
...

Функція _dialogConfirmed () має такий код:

    var that = this;

    setTimeout(function () {
      if (that.confirmAction) {
        (that.confirmAction)();
        that.confirmAction = undefined;
      }
    }, 500);

Я здогадуюсь, що інші рішення спрацювали, оскільки вони зайняли достатньо додаткового часу, надаючи браузеру необхідний час очищення.

В ASP.NET додайте оновлення для UpdatePanel на код позаду після команди jquery. Приклад:

    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal('hide');", true);
    upModal.Update();