Modalne tło Twitter bootstrap nie znika

260

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

paganotti
źródło
5
Używasz $('#myModal').modal('hide')? Czy możesz tu podać kod?
Pigueiras,
20
Jeśli używasz kopiowania i wklejania z samej witryny getboostrap do selektora generowanego w formacie HTML, pamiętaj o usunięciu komentarza „<! - /.modal ->”. Bootstrap jest zdezorientowany i uważa, że ​​komentarz jest drugim elementem modalnym. Tworzy kolejną kroplę wsteczną dla tego „drugiego” elementu.
Jordan,
@Jordan: Twój komentarz musi być odpowiedzią! W moim przypadku twój komentarz był poprawnym rozwiązaniem!
BlaM
Zobacz następujące informacje: stackoverflow.com/questions/22207377/…
Nutan
Wiem, że pytanie jest stare, ale dzisiaj mam podobny problem, w mojej sytuacji nie udało się usunąć klasy „modal-lg”, która została pozostawiona tylko „modalowi”, powodując bałagan, kiedy trzeba było zamknąć modal za pomocą klawiatury / kliknij gdzieś na zewnątrz.
Matteo,

Odpowiedzi:

549

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();
ChezFre
źródło
16
Dałbym tę odpowiedź +2, gdybym mógł. Właśnie zaoszczędziłem godziny!
Andre Lombaard
9
Ukrywanie modalu przed wywołaniem AJAX jest złym rozwiązaniem, jeśli musisz ocenić odpowiedź AJAX i odpowiednio zaktualizować modal.
asciimo
19
Myślę, że może to być również spowodowane wywołaniem modalu („hide”), zanim animacja przenikania zostanie w pełni ukończona. Usunięcie klasy przenikania z modalu może pomóc.
EvilPuppetMaster
7
$ ('. modal-backdrop'). remove (); rozwiązałem to dla mnie, nie trzeba usuwać zanikania klasy
Omar S.
34
$('.modal-backdrop').remove()wydaje się, że psuje przyszłe moduły otwierające się poprawnie.
krock,
65

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.

monter
źródło
16
Ten facet miał pieniądze. Usunąłem komentarze z modalu, który otrzymywałem za pomocą $ .html () i teraz działa. Kurwa dziwnie.
Matrym
2
To był również problem dla mnie.
Bob Black
6
Głupi bootstrap! Ich własny przykładowy znacznik (z komentarzami na początku i na końcu) łamie ten paradygmat. Usuń komentarz i to działa!
goofballLogic
To samo tutaj. Usunięcie komentarzy rozwiązało problem. Tylko jedno pytanie. Widzę, że modal działa idealnie bez dodawania go do DOM za pomocą $ („body”). Append (myModal). Czy konieczne jest dodanie modalu do strony DOM?
VictorEspina,
Miałem niedopasowany tag. Ten sam wynik. Dzięki!
jozxyqk
51

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!

Bill Huertas
źródło
15
Też spędziłem zbyt długo! Ta odpowiedź dała mi wskazówkę - coś blokowało mój DOM (kątowy). Patrząc na kod bootstrap, możesz po prostu wymusić natychmiastowe usunięcie tła, najpierw usuwając klasę zanikania:$('#myModal').removeClass('fade');$(myModal').modal('hide')'
Ross R
Powinna być zaakceptowana odpowiedź - używa interfejsu API bootstrap zgodnie z przeznaczeniem i nie rąbie ciała za pomocą .modal-open
Aaron Hudon
To najbardziej sumienna i sumienna odpowiedź.
JacobIRR
Świetna odpowiedź, mój problem był również spowodowany wywołaniem ajax zastępującym dom - domyślnie modal ('hide') zwraca siebie lub odwołanie modalne, abyśmy mogli dołączyć do 'hidden.bs.modal'?
Michael Harper
stwierdzenie, że wydarzenia związane z ukrywaniem
modów
32

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

kampageddon
źródło
2
To jest prawdziwa odpowiedź. Pod żadnym pozorem nie próbuj ręcznie robić rzeczy, które Bootstrap ma zrobić. Jeśli to byłoby twoje rozwiązanie, źle je wdrażasz. Myślę, że główny kod HTML na stronie bootstrap jest trochę niekompletny i dlatego wiele osób doświadcza opisywanego zachowania (w tym ja). Dzięki! +1
Ben Fransen
3
Co jeśli chcesz uruchomić modal nie za pomocą przycisku?
shinzou
7
@ben jesteś w błędzie. data-backdrop="false"to po prostu opcja informująca bootstrap, aby w ogóle nie używał tła . To nie ma nic wspólnego z rzeczywistym problemem, po prostu go unika. To tak, jakby powiedzieć „nie umiem pływać, więc przestałem wchodzić do basenu”. To fajnie, ale nadal nie możesz pływać, a jeśli twój szef rzuci cię w głęboki koniec, utoniesz. Istnieje wiele przypadków, w których wymagana jest ręczna interwencja, na przykład gdy Angular tupie na DOM w tle Twojej aplikacji.
Wesley Smith
18

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.

Jordania
źródło
Niech mnie diabli ... to był dokładnie mój problem. Usunąłem komentarz i zadziałało. Jak, u diabła, wpada komentarz HTML w górę Bootstrap !?
Turner Hayes,
Wierzę, że szuka elementów HTML, aby uzyskać liczbę. Ponieważ komentarze są uważane za elementy, liczba ta jest błędna w przypadku tego komentarza.
Jordan
zdarzyło mi się, gdy miałem ten plik w szablonie Wąsy
Pavel 'PK' Kaminsky
Komentarze istnieją w DOM w taki sposób, że pomieszały javascript połowę komponentu modalnego. Zapominam jak dokładnie. To było jakiś czas temu.
Jordan
Holy Moley - to faktycznie działa! To taki dziwny błąd.
Dror S.
14

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

Chaitanya Bankanhal
źródło
1
To działało idealnie dla mnie. Za pomocą bootstrap 4 tutaj.
Eddie Teixeira,
1
To powinna być domyślna odpowiedź. Dzięki
Makamu Evans,
co myModalpowinno być I dlaczego miałoby to zamknąć okno dialogowe? Modalne okna dialogowe zamykane są tylko poprzez kliknięcie przycisku zamykania lub kliknięcie poza oknem dialogowym. To nie wydaje się rozwiązaniem.
MushyPeas
jaki powinien być myModal? -> Jest to id głównego modalu. I dlaczego miałoby to zamknąć okno dialogowe? -> Działa, ponieważ domyślnie po kliknięciu na zewnątrz modalu akcja propaguje się do jego rodzica i jest tam obsługiwana.
Chaitanya Bankanhal
9

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!

Dima Gabachov
źródło
To samo tutaj, co jeśli nie chcesz uruchamiać modalu z przycisku?
shinzou
9

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.

Mark F. Guerra
źródło
8

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

Helmut Hackl
źródło
To zdecydowanie lepsze rozwiązanie. W ten sposób nie musisz zadzierać z klasami modalnymi, co jest prawdopodobnie bardziej poprawnym sposobem rozwiązania tego problemu.
DeanMWake
6

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!

Webinan
źródło
5

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

Yasser Shaikh
źródło
Ręczne wyzwalanie zdarzenia click nie zamyka dla mnie modalu w IE9 / IE10. Próbuję znaleźć rozwiązanie.
Antony Harder
Niemniej jednak problem był nieco inny - do tego przycisku dołączony był warunek włączenia danych i chociaż IE kontynuował zdarzenia onclick, nie wziął pod uwagę atrybutu odrzucania danych.
Antony Harder
5

posługiwać się:

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

Źródło

Jamshid Hashimi
źródło
3

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.

Mindriot
źródło
3

$ („# 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.

Ashhab
źródło
2

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ł

Opcja Al
źródło
To był mój problem. Miałem AjaxManagera, który tworzył panele aktualizacji wokół mojej kontroli użytkownika, która zawierała cały modal. Zostawiłem tylko ciało modalu w kontrolce użytkownika i przeniosłem wszystko na stronie głównej i wszystko zaczęło działać zgodnie z oczekiwaniami, więc nie twórz na aukcji części <div id = "# mymodal">!
AlexanderD
2

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.

ohm89
źródło
2

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.

Nick M.
źródło
Działa jak urok.
Pattu
2

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 })
}
wendyg
źródło
1

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.

Matthew Andrianakos
źródło
1

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

Yash K
źródło
1
udostępnij możliwą odpowiedź (przykład). Pomoże innym dobrze zrozumieć
Sachith Muhandiram,
1

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.

użytkownik2707674
źródło
1

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');
        });
Rez
źródło
1

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');
}
sym
źródło
0

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

JenonD
źródło
0

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.

Vin
źródło
0

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}}
Scuba Kay
źródło
0
//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/

Fábio Zangirolami
źródło
0

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


});

Alejandro Quintero
źródło
0

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.

Behnam
źródło
0

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();
mathias.horn
źródło