Modalne tło Twitter bootstrap nie znika

Korzystam z modalnego okna dialogowego bootstrap na Twitterze. Kiedy klikam przycisk Prześlij w modalnym oknie dialogowym ładowania początkowego, wysyła żądanie AJAX. Mój problem polega na tym, że tło modalne nie znika. Okno dialogowe modalne znika poprawnie, ale zamiast tego pozostaje „modalne tło w”, które tworzy krycie na ekranie

Co mogę zrobić?

Upewnij się, że nie zastępujesz kontenera zawierającego rzeczywiste okno modalne podczas wykonywania żądania AJAX, ponieważ Bootstrap nie będzie w stanie znaleźć odniesienia do niego, gdy spróbujesz go zamknąć. W Ajax complete handler usuń modal, a następnie zastąp dane.

Jeśli to nie pomoże, zawsze możesz zmusić go do odejścia, wykonując następujące czynności:

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

Upewnij się, że twoje pierwsze wezwanie do $.modal()zastosowania zachowania modalnego nie przekazuje więcej elementów, niż zamierzałeś. Jeśli tak się stanie, zakończy się tworzenie instancji modalnej wraz z elementem tła dla KAŻDEGO elementu w kolekcji. W związku z tym może wyglądać, jakby tło zostało pozostawione, gdy faktycznie patrzysz na jeden z duplikatów.

W moim przypadku próbowałem stworzyć zawartość modalną w locie za pomocą takiego kodu:

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

Tutaj komentarz HTML po </div>tagu zamykającym oznaczał, że myModal był w rzeczywistości kolekcją jQuery dwóch elementów - div i komentarza. Oba zostały obowiązkowo przekształcone w modale, każdy z własnym elementem tła. Oczywiście modal wykonany z komentarza był niewidoczny oprócz tła, więc kiedy zamknąłem prawdziwy modal (div), wyglądało to tak, jakby tło zostało pozostawione.

Właśnie spędziłem zbyt długo na tym problemie :)

Podczas gdy inne udzielone odpowiedzi są pomocne i poprawne, wydawało mi się trochę nieporządne skuteczne odtworzenie funkcji ukrywania modalnego z Bootstrap, więc znalazłem czystsze rozwiązanie.

Problem polega na tym, że podczas połączenia dochodzi do łańcucha zdarzeń

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

Kiedy następnie zastąpisz pakiet HTML w wyniku żądania AJAX, zdarzenia ukrywania modałów nie kończą się. Jednak Bootstrap wyzwala zdarzenie, gdy wszystko jest skończone , i możesz się do tego podłączyć w następujący sposób:

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

Mam nadzieję, że to jest pomocne!

Wstaw przycisk akcji:

data-backdrop="false"

i

data-dismiss="modal" 

przykład:

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

po wprowadzeniu tego atrybutu danych tło .modal nie pojawi się. dokumentacja na ten temat pod tym linkiem: http://getbootstrap.com/javascript/#modals-usage

Jeśli używasz kopiowania i wklejania z samej strony getboostrap do selektora generowanego w formacie HTML, pamiętaj o usunięciu komentarza „<! - /.modal ->”. Bootstrap wprawia w zakłopotanie i myśli, że komentarz jest drugim elementem modalnym. Tworzy kolejną kroplę wsteczną dla tego „drugiego” elementu.

Wiem, że to bardzo stary post, ale to może pomóc. To jest bardzo małe obejście przeze mnie

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

To wszystko, powinno to rozwiązać problem

Wystąpił podobny problem: w moim oknie modalnym mam dwa przyciski: „Anuluj” i „OK”. Początkowo oba przyciski zamykały okno modalne, wywołując $('#myModal').modal('hide')(z „OK” wcześniej wykonując jakiś kod), a scenariusz wyglądałby następująco:

1. Otwórz okno modalne
2. Wykonaj kilka operacji, a następnie kliknij „OK”, sprawdź je i zamknij modal
3. Ponownie otwórz modal i zamknij, klikając „Anuluj”
4. Ponownie otwórz modal, kliknij ponownie „Anuluj” ==> tło nie jest już dostępne!

cóż, mój kolega z następnego biurka uratował mi dzień: zamiast wywoływać $('#myModal').modal('hide'), nadaj swoim przyciskom atrybut data-dismiss="modal"i dodaj zdarzenie „kliknięcie” do przycisku „Prześlij”. W moim problemie kod HTML (no, TWIG) dla przycisku to:

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

aw moim kodzie JavaScript mam:

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

podczas gdy do przycisku „Anuluj” nie jest przypisane żadne zdarzenie „kliknięcie”. Modal zamyka się teraz poprawnie i pozwala mi ponownie grać na stronie „normalnej”. Wydaje się, że data-dismiss="modal"powinien to być jedyny sposób wskazania, że ​​przycisk (lub jakikolwiek element DOM) powinien zamknąć mod Bootstrap. .modal('hide')Metoda wydaje się zachowywać się w sposób nie do końca kontrolowany.

Mam nadzieję że to pomoże!

Ten problem może również wystąpić, jeśli ukryjesz, a następnie ponownie wyświetlisz okno modalne. Zostało to wspomniane w innym miejscu na pytanie, ale poniżej przedstawię więcej szczegółów.

Problem dotyczy synchronizacji i przejścia zanikania. Jeśli pokażesz modal przed zakończeniem przejścia dla poprzedniego modalu, zobaczysz ten uporczywy problem z tłem (modalne tło pozostanie na ekranie, na swój sposób). Bootstrap wyraźnie nie obsługuje wielu modałów jednocześnie, ale wydaje się to stanowić problem, nawet jeśli modal, który ukrywasz i modal, który pokazujesz, są takie same.

Jeśli jest to właściwy powód Twojego problemu, oto kilka opcji jego rozwiązania. Opcja nr 1 to szybki i łatwy test pozwalający ustalić, czy taktowanie przejścia przejściowego jest rzeczywiście przyczyną problemu.

1. Wyłącz animację Fade dla modalu (usuń klasę „fade” z okna dialogowego)
2. Zaktualizuj tekst modalu, zamiast go ukrywać i wyświetlać ponownie.
3. Napraw czas tak, aby nie wyświetlał modalu, dopóki nie zakończy ukrywania poprzedniego modalu. Aby to zrobić, użyj zdarzeń modalu. http://getbootstrap.com/javascript/#modals-events

Oto kilka powiązanych postów dotyczących śledzenia problemów z bootstrapem. Możliwe, że jest więcej postów z trackerem niż wymienionych poniżej.

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

.modal („ukryj”)

Ręcznie ukrywa modal. Powraca do programu wywołującego przed faktycznym ukryciem modalu (tj. Przed wystąpieniem zdarzenia hidden.bs.modal).

Więc zamiast

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

robić

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

Na pewno poczekasz, aż wydarzenie „ukryj” się zakończy.

Kolejny możliwy błąd, który może powodować ten problem,

Upewnij się, że bootstrap.jsskrypt nie zawierał więcej niż jeden raz na stronie!

Nawet miałem podobny problem, miałem dwa następujące przyciski

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

Chciałem wykonać operację ajax i po jej pomyślnym zamknięciu modal. Oto co zrobiłem.

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

Uruchomiłem zdarzenie kliknięcia przycisku „Nie”, który miał data-dismiss="modal"właściwość. I to zadziałało :)

posługiwać się:

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

Źródło

To rozwiązanie dotyczy Ruby on Rails 3.x i pliku js.erb, który odbudowuje część DOM, w tym modal. Działa niezależnie od tego, czy wywołanie ajax pochodzi z modalu, czy z innej części strony.

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

Dzięki @BillHuertas za punkt wyjścia.

$ („# myModal”). trigger („kliknięcie”);

To zadziałało dla mnie. Nie zamyka się, ponieważ po otwarciu wyskakującego okienka wyzwala 2 lub 3 modalne tła. Więc kiedy wykonasz $ ('# myModal')). Modal ('hide'); wpływa tylko na jedno tło modalne i pozostaje reszta.

problem z panelem aktualizacji.

Mój problem był spowodowany umieszczeniem panelu aktualizacji. Miałem cały modal w panelu aktualizacji. Jeśli zadeklarujesz modal poza panelem aktualizacji i po prostu powiesz, ciało modalne, w panelu aktualizacji, to $ ('# myModalID'). Modal ('hide'); pracował

Kolejny punkt widzenia na to pytanie. (Używam bootstrap.js w wersji 3.3.6)

Błędnie zainicjowałem modalność zarówno ręcznie w javascript:

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

i za pomocą

data-toggle="modal"

w tym przycisku jak przykład poniżej (pokazany w dokumencie)

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

więc wynikiem jest utworzenie dwóch wystąpień

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

dołącz do treści mojego html po otwarciu modalu. Może to być przyczyną zamknięcia modułu za pomocą funkcji:

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

usuwa tylko jedną instancję tła (jak pokazano powyżej), aby tło nie zniknęło. Ale zniknął, jeśli używaszdata-dismiss="modal" add na HTML jako show w bootstrap doc.

Tak więc rozwiązaniem mojego problemu jest ręczne inicjowanie modalu w javascript i nieużywanie atrybutu danych. W ten sposób mogę zarówno zamknąć modal ręcznie, jak i przy użyciu data-dismiss="modal"funkcji.

Mam nadzieję, że to pomoże, jeśli napotkasz ten sam problem jak ja.

Do Twojej wiadomości, na wypadek, gdyby ktoś napotkał ten problem ... Spędziłem około 3 godzin, aby odkryć, że najlepszym sposobem na to jest:

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

Ta funkcja zamykania modułu jest bardzo nieintuicyjna.

Dodanie data-dismiss="modal"przycisków w moim module działało dla mnie. Chciałem, aby mój przycisk wywołał funkcję z kątowym, aby wywołać wywołanie ajax ORAZ zamknąć modal, więc dodałem funkcję .toggle()wewnątrz i działało to dobrze. (W moim przypadku użyłem a bootstrap modali użyłem trochę angular, a nie rzeczywistego kontrolera modalnego).

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

Miałem ten sam problem. Odkryłem, że było to spowodowane konfliktem między Bootstrap a JQueryUI.

Oba używają klasy „close”. Zmiana klasy w jednym lub drugim rozwiązuje to.

Użycie przełącznika zamiast ukrywania rozwiązało mój problem

Upewnij się, że nie używasz tego samego elementu Id / class w innym miejscu, dla elementu niezwiązanego ze składnikiem modalnym.

To znaczy ... jeśli identyfikujesz przyciski, które uruchamiają modalne wyskakujące okienka za pomocą nazwy klasy „myModal”, upewnij się, że nie ma niepowiązanych elementów o tej samej nazwie klasy.

Po zastosowaniu najwyżej ocenianego rozwiązania miałem problem z tym, że psuje prawidłowe otwieranie przyszłych modałów. Znalazłem moje rozwiązanie, które działa dobrze

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

Miałem ten sam problem podczas próby przesłania formularza. Rozwiązaniem było zmienić typ przycisku z submitna, buttona następnie obsłużyć zdarzenie kliknięcia przycisku w następujący sposób:

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

W projekcie .net MVC4 miałem modalne okienko wyskakujące (bootstrap 3.0) wewnątrz Ajax.BeginForm (OnComplete = "addComplete" [usunięty dodatkowy kod]). Wewnątrz javascript „addComplete” miałem następujący kod. To rozwiązało mój problem.

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

$ („# moreLotDPModal”). dane („bs.modal”). isShown = false;

$ („body”). removeClass („modal-open”);

$ ('. modal-backdrop'). remove ();

$ („# moreLotDPModal”). removeClass („in”);

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

Miałem ten sam problem.

Jednak korzystałem z bootbox.js, więc mogło to mieć coś wspólnego z tym.

Tak czy inaczej, zdałem sobie sprawę, że przyczyną problemu jest posiadanie elementu o tej samej klasie, co jego rodzic. Gdy jeden z tych elementów jest używany do powiązania funkcji kliknięcia w celu wyświetlenia modalu, pojawia się problem.

to jest przyczyną problemu:

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

zmień go, aby klikany element nie miał tej samej klasy co element nadrzędny, którykolwiek z jego elementów potomnych lub innych przodków. Prawdopodobnie dobrą praktyką jest robienie tego ogólnie podczas wiązania funkcji kliknięcia.

Pracuję z Meteorem i mam ten sam problem. Przyczyną mojego błędu było:

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

Jak widać, dodałem modal w innym, więc kiedy mój modal zaktualizował informacje kontaktowe, if miał inny stan. To spowodowało, że szablon modalny został pominięty z DOM tuż przed jego zamknięciem.

Rozwiązanie: przenieś modal z poza if:

{{#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');

skrzypce -> https://jsfiddle.net/o6th7t1x/4/

początkowa wartość atrybutu danych-tło może być

„statyczny”, „prawda”, „fałsz”.

static i true dodają cień modalny, a false wyłącza cień, więc wystarczy zmienić tę wartość przy pierwszym kliknięciu na false. lubię to:

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


});

Miałem problem z modalnym zamrożeniem ekranu tła, ale w nieco innym scenariuszu: kiedy wyświetlały się 2 modale z powrotem na plecy. np. Pierwszy poprosiłby o potwierdzenie zrobienia czegoś, a po kliknięciu przycisku „Potwierdź” akcja napotkałaby błąd, a drugi modal miał zostać wyświetlony w celu wyświetlenia komunikatu o błędzie. Drugie tło modalne zamrozi ekran. Nie było żadnych konfliktów w nazwach klas lub identyfikatorach elementów.

Rozwiązano problem polegający na zapewnieniu przeglądarce wystarczającej ilości czasu na poradzenie sobie z modalnym tłem. Zamiast natychmiast podjąć działanie po kliknięciu przycisku „potwierdź”, daj przeglądarce 500 ms, aby ukrył pierwszy modal i wyczyścił tło itp. - a następnie podejmij działanie, które zakończy się wyświetleniem modalu błędu.

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

Funkcja _dialogConfirmed () ma następujący kod:

    var that = this;

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

Domyślam się, że inne rozwiązania działały, ponieważ zajęły wystarczająco dużo czasu, dając przeglądarce potrzebny czas czyszczenia.

W ASP.NET dodaj aktualizację UpdatePanel do kodu po komendzie jquery. Przykład:

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