Modal bootstrap pojawiający się w tle

576

Użyłem kodu dla mojego modalu prosto z przykładu Bootstrap i dołączyłem tylko bootstrap.js (a nie bootstrap-modal.js). Jednak mój modal pojawia się pod szarym odcieniem (tło) i nie można go edytować.

Oto jak to wygląda:

modalne chowające się za tłem

Zobacz to skrzypce dla jednego poznać sposobów na odtworzenie tego problemu. Podstawowa struktura tego kodu jest następująca:

<body>
    <p>Lorem ipsum dolor sit amet.</p>    

    <div class="my-module">
        This container contains the modal code.
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">Modal</div>
                </div>
            </div>
        </div>
    </div>
</body>
body {
    padding-top: 50px;
}

.my-module {
    position: fixed;
    top: 0;
    left: 0;
}

Wszelkie pomysły, dlaczego to jest lub co mogę zrobić, aby to naprawić?

javascript  css  twitter-bootstrap  modal-dialog 
— natlines
źródło
W przypadku, gdy ktoś szuka czasu na otwarte tagi itp., Próbując dowiedzieć się, dlaczego tak się dzieje, dla mnie to rozszerzenie Feedly chrome złamało moje moduły. Wyłączenie rozszerzenia powróciło do normy.
— trzy
Być może problem był na iOS i spowodowany przez overflow-x: hiddenzastosowanie do kontenera modalu.
— idmean
1
Utworzono 3 przykłady w 3 wersjach. 3.3.1 działa dobrze, a pozostałe nie. Wersja 3.3.1 jsfiddle Wersja 3.3.5 jsfiddle Wersja 3.3.6 jsfoddle
— Dimitry
1
Utworzono raport o błędach z zespołem Bootstrap. Wygląda na to, że tak naprawdę nie jest to błąd. Możesz przeczytać więcej na ten temat w linku, który opublikowałem.
— Dimitry

Odpowiedzi:

628

Jeśli kontener modalny ma ustaloną lub względną pozycję lub znajduje się w elemencie o ustalonej lub względnej pozycji, takie zachowanie nastąpi.

Upewnij się, że kontener modalny i wszystkie jego elementy nadrzędne są ustawione jako domyślny sposób rozwiązania problemu.

Oto kilka sposobów, aby to zrobić:

  1. Najłatwiej jest po prostu przesunąć modalny div, aby znajdował się poza elementami ze specjalnym pozycjonowaniem. Jedno dobre miejsce może znajdować się tuż przed tagiem zamykającym ciało </body>.
  2. Alternatywnie możesz usunąć position:właściwości CSS z modalu i jego przodków, dopóki problem nie zniknie. Może to jednak zmienić wygląd i działanie strony.
— Muhd
źródło
23
Dobry chwyt Do Twojej wiadomości, nie tylko „naprawiona”, postawa rodzica „krewnego” również powoduje ten problem
— Giang Nguyen,
3
@Muhd, jak się upewnić, że i wszystkie jego elementy nadrzędne są ustawione domyślnie?
— indago
4
Wolę użyć opcji jeden: „wystarczy przesunąć modalny div, aby znalazł się poza elementami ze specjalnym pozycjonowaniem”. Thx
— mpgn
9
Nie rozumiem tej odpowiedzi. Przykłady Bootstrap pokazują div modalny z szeregiem klas wzdłuż linii „modal”, „modal-fade” itp. Wewnątrz .modal ustala pozycję: ustaloną, a wewnątrz „modal-body” ustawia pozycję: względną. Jak więc przemieszczanie kontenera modalnego coś zmieni, skoro .modal ustawia pozycję: naprawiono?
— Carlos
4
Nadal mam ten problem. Dodałem go wcześniej </body>i nie bodymam żadnego positionatrybutu stylu. Jakiś inny pomysł?
— Tuan Anh Tran
383

Problem dotyczy pozycjonowania kontenerów nadrzędnych. Możesz łatwo „przenieść” swój modal z tych kontenerów przed jego wyświetleniem. Oto jak to zrobić, jeśli showkorzystasz z modalu za pomocą js:

$('#myModal').appendTo("body").modal('show');

Lub, jeśli uruchamiasz modal za pomocą przycisków, upuść .modal('show');i po prostu wykonaj:

$('#myModal').appendTo("body")

Pozwoli to zachować normalną funkcjonalność, umożliwiając pokazanie modalu za pomocą przycisku.

— Adam Albright
źródło
12
Użyj tej ogólnej procedury obsługi zdarzeń, aby rozwiązanie @leandrotk działało dla wszystkich modałów, które możesz mieć na stronie $('.modal-dialog').parent().on('show.bs.modal', function(e){ $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
— Patrick M.
2
@PatrickM. Niesamowity! które działały jak urok starego projektu, który przejmuję i miały modały wszędzie!
— denisleksowy
5
Działa to świetnie, gdy naprawdę nie można naprawić pozycjonowania CSS. Dzięki :)
— alexcasalboni
Czy jest jakiś powód, dla którego tracę całe formatowanie CSS? A łatwa naprawa? :-)
— Eugene van der Merwe
1
Z odpowiedzi leandrotk zmień #myModal na .modal, aby wyglądać tak: $ ('. Modal'). AppendTo ("body"). Będzie to działać ze wszystkimi modalami, ponieważ mają one domyślny modal klasy.
— Ngatia Frankline
170

Wypróbowałem wszystkie opcje podane powyżej, ale nie udało mi się z nich skorzystać.

Co zadziałało: ustawienie indeksu Z dla .modal-backdrop na -1.

.modal-backdrop {
  z-index: -1;
}
— Jan van der Burgt
źródło
10
Działa to idealnie i jest zdecydowanie najłatwiejszym rozwiązaniem. Użyłemz-index: 0;
— andrewcockerham
Może również potwierdzić, że działają tylko te opcje! Dzięki!
— Prom Kranenburg
Dzięki! Czy to błąd w BS3?
— mauriblint
1
To nie działa, jeśli używasz motywu, który ma wiele różnych wskaźników Z. Na przykład ustawienie tła -1tak, aby wyświetlało się za innymi elementami na stronie, takimi jak panele. Ale ustawienie go tak, aby 3było ponad wszystkim oprócz modalnego wyskakującego okienka.
— Justin Skiles,
1
Stwierdziłem, że jest to również najszybsza metoda po wyczerpaniu sugestii w odpowiedziach wyżej ocenianych. W moim przypadku ustawienie div z klasą dialogów modalnych na indeks Z wynoszący 1060 umieściło go przed nakładką. Jeśli używasz paska nawigacyjnego, będziesz chciał przesunąć modal nad nakładkę, a nie na odwrót, w przeciwnym razie pasek nawigacyjny może wyskoczyć na nakładkę ... chaos niewystarczający ...
— Mike Devenney
152

Upewnij się również, że wersje BootStrap css i js są takie same. Różne wersje mogą również wyświetlać modalne pod tłem:

Na przykład:

Zły:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

Dobrze:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
— Sid
źródło
To też było dla mnie. Dzięki!
— PedroTanaka
Właśnie miałem ten sam problem, wydaje się, że rozwiązanie tego samego arkusza stylów wersji pomogło wszystkim! Dzięki
— HGB
Dziękuję, to był mój dokładny problem
— Malcor
Malcor nie ma problemów, spędziłem dużo czasu, gdy wymyśliłem ten błąd. Jak widzimy w 14, teraz jest 16, błąd nadal istnieje. Właściwie to nie jest błąd, ale autorzy w bootstrapie powinni dodać to do swojej dokumentacji lub czegoś takiego
— Sid
Ta sama sprawa tutaj, przeszliśmy na generowanie naszego SASS i całkowicie zapomnieliśmy o samym pliku js .. To musi być najlepsza odpowiedź .. Ponieważ nasz modal jest zawsze domyślnie dołączany tuż przed znacznikiem close body ...
— Angry 84
116

Zetknąłem się również z tym problemem i żadne z rozwiązań nie zadziałało, dopóki nie zorientowałem się, że właściwie nie potrzebuję tła. Możesz łatwo usunąć tło za pomocą poniższego kodu.

<div class="modal fade" id="createModal" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Create Project</h4>
            </div>
            <div class="modal-body">Not yet made</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Uwaga : data-backdropatrybut należy ustawić na false( inne opcje : staticlub true).

— PieterVK
źródło
2
Zdecydowanie najłatwiejsze rozwiązanie i działa jak urok!
— learning_to_swim
Znakomity! Musiałem także wymagać bootstrapu - nie jestem pewien, dlaczego wszystkie moje inne funkcje Bootstrap działają dobrze, ale potrzebowałem, aby modal działał.
— Steve Klein
Doskonały !!! walczyłem przez jeden dzień ... a ty uratowałeś mi kolejny dzień. Jeszcze raz dziękuję .. +1 i na zdrowie
— Bhaskara
1
Po uważnym przeczytaniu wszystkich rozwiązań uznałem, że jest to najbardziej sensowne z dzisiejszej wersji bootstrap i jQuery. Dziękuję Ci.
— Szyfrowanie
3
Dziękuję Ci! To pytanie ma ponad 140 000 wyświetleń i nie rozumiem, dlaczego bootstrap nie może tego naprawić. no cóż, na zdrowie.
— Czad
58

Sprawiłem, że zadziałało, podając wysoką wartość wskaźnika Z do okna modalnego PO jego otwarciu. Na przykład:

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");
— Andrew Dyster
źródło
Czy to działa (mężczyzna mówi, że tak jest), dlaczego nie głosujesz? Kiedy patrzę, wydaje się, że tak będzie.
— Rolice,
Tak, czy ktoś może wyjaśnić, dlaczego jest to zła odpowiedź? Czy to po prostu trochę hacky?
— brandones 18.04.13
6
Nie rozumiem głosów negatywnych. Tak, to jest hacking, ale inne rozwiązania nie działały dla mnie, więc pomyślałem, że przekażę to ludziom, którzy nie mają nic przeciwko użyciu „hacky” rozwiązań, aby po prostu uruchomić to cholerstwo.
— Andrew Dyster
Był to istotny wgląd w mój konkretny problem polegający na umieszczeniu modalu nad elementem pełnoekranowym. +1
— Jack Stone
3
To zła odpowiedź, ponieważ jest to hack i nie próbuje tego wskazać. Inne odpowiedzi mówią: „jeśli nic innego nie działa, możesz ...”. Rzeczywistość jest taka, że ​​modal jest bardzo szeroko stosowany w sieci i powinien działać, jeśli zostanie poprawnie zaimplementowany. Nieuczciwe odpowiedzi nie pomagają ludziom dowiedzieć się, jak robić rzeczy we właściwy sposób.
— Lukos
35

Rozwiązanie dostarczone przez @Muhd jest najlepszym sposobem na to. Ale jeśli utkniesz w sytuacji, w której zmiana struktury strony nie jest opcją, skorzystaj z tej sztuczki:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">...</div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

Sztuczka tutaj jest data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" na usunięciu domyślnego tła i stworzeniu fikcyjnego, poprzez ustawienie koloru tła samego okna dialogowego za pomocą alfa.

Aktualizacja 1: Jak zauważył @Gustyn, że kliknięcie w tło nie zamyka okna dialogowego zgodnie z oczekiwaniami. Aby to osiągnąć, musisz dodać kod skryptu Java. Oto kilka przykładów, jak możesz to osiągnąć. 

$('.modal').click(function(event){
    $(event.target).modal('hide');
});
— Krishnendu
źródło
Działa to z tym wyjątkiem, że kliknięcie w tło nie zamyka okna dialogowego zgodnie z oczekiwaniami.
— Gustyn
Krishnendu jesteś moim bohaterem. Przyszedłem do pracy z myślą o losie i mroku. 3 dni przed moją ostatnią prezentacją, aby zmierzyć się z tym problemem, nagle ogarnęło mnie nerwy. U, mój przyjacielu, zasługujesz na 100000 pozytywnych opinii, niestety dasz ci tylko jeden :) życzę cudownie błogosławionego dnia.
— DotNetBeginner
Kiedy próbuję, nie obejmuje pełnego tła strony - tylko element div, w którym zadeklarowany jest modal.
— Will Sam
Działał idealnie. Dziękuję Ci!
— gfernandes,
Działał idealnie. Dziękuję Ci!
— Mayank Pandeyz
16

Ale późno, ale tutaj jest ogólne rozwiązanie -

    var checkeventcount = 1,prevTarget;
    $('.modal').on('show.bs.modal', function (e) {
        if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
        {  
          prevTarget = e.target;
          checkeventcount++;
          e.preventDefault();
          $(e.target).appendTo('body').modal('show');
        }
        else if(e.target==prevTarget && checkeventcount==2)
        {
          checkeventcount--;
        }
     });

Odwiedź ten link - Bootstrap 3 - modalne znikanie poniżej tła, gdy używasz stałego paska bocznego, aby uzyskać szczegółowe informacje.

— Rohan
źródło
To było idealne rozwiązanie dla wtyczki Wordpress, którą tworzyłem, w której nie mogłem kontrolować elementów nadrzędnych w motywach innych osób.
— Mark Rummel
Najlepsze rozwiązanie do tej pory!
— digz6666
10

Innym sposobem podejścia do tego jest usunięcie indeksu Z z .modal-backdrop pliku bootstrap.css. Spowoduje to, że tło będzie na tym samym poziomie, co reszta twojego ciała (nadal będzie zanikać), a twój modal będzie na szczycie.

.modal-backdrop wygląda tak

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
}
— Samuel Bergeron
źródło
10

Wystarczy dodać dwie linie CSS:

.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}

Tło .modal powinno mieć wartość 1050, aby ustawić je nad paskiem nawigacyjnym.

— Wahyu Primadi
źródło
Fajnie, ale jeśli kontener modułów ma position: fixedto, to nie zadziała.
— CPHPython
10

To obejmie wszystkie modały bez zepsucia animacji lub oczekiwanego zachowania. 

$(document).on('show.bs.modal', '.modal', function () {
  $(this).appendTo('body');
});
— Cam Tullos
źródło
1
globalne rozwiązanie. jednak lepiej znaleźć problem.
— Milad Abooali
Nie sądzę, że to świetne rozwiązanie, a co ze stronami z dużą ilością modałów? Może się bałaganić.
— Glen,
Czy potrafisz wytłumaczyć, w jaki sposób byłoby bałagan? Wszystko, co robi, to przeniesienie modalu z miejsca, w którym aktualnie znajduje się w DOM, na koniec znacznika body. Nie tworzy niczego, czego jeszcze nie ma, po prostu przenosi go i automatycznie nadaje mu najwyższy indeks Z.
— Cam Tullos,
Myślę, że najlepsze rozwiązanie. nie trzeba edytować żadnego css i zmieniać wyglądu modalnego
— Moslem7026,
8

Po prostu ustawiłem:

#myModal {
    z-index: 1500;
}

i działa ....

W przypadku pierwotnego pytania: 

.my-module {
    z-index: 1500;
}
— AmintaCode
źródło
Moim problemem był również indeks Z.
— James Lock
8

Problem ten często występuje podczas korzystania z elementów takich jak gradienty w CSS dla elementów takich jak tła, a nawet nagłówki akordeonów.

Niestety modyfikowanie lub zastępowanie rdzenia Bootstrap CSS jest niepożądane i może prowadzić do niepożądanych efektów ubocznych. Najmniej inwazyjne podejście polega na dodaniu, data-backdrop="false"ale możesz zauważyć, że efekt zanikania nie działa już zgodnie z oczekiwaniami.

Po ostatnich wydaniach Bootstrap, wersja 3.3.5 wydaje się rozwiązać ten problem bez niepożądanych efektów ubocznych.

Pobieranie: https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip

Pamiętaj, aby dołączyć pliki CSS i JavaScript z 3.3.5.

— Richard Należyński
źródło
6

Cześć, miałem ten sam problem, ale zdaję sobie sprawę, że kiedy używasz Bootsrap 3.1 W przeciwieństwie do starszych wersji Bootsrap (2.3.2), struktura html modalu została zmieniona!

musisz owinąć swój modalny nagłówek i stopkę modal-dialog i modal-content 

<div class="modal hide fade">

  <div class="modal-dialog">
    <div class="modal-content">

    **here goes the modal header body and footer**

    </div>
  </div>

 </div>
— talsibony
źródło
+1 upewnij się, że używasz zgodnych wersji bootstrap.css i bootstrap.js oraz że znaczniki odpowiadają używanej wersji.
— srayner,
Tak, to był mój wniosek i napisałem to tutaj, jeśli ktoś miał ten problem.
— talsibony
Jezu Chryste, ta odpowiedź jest głęboko pochowana. To samo dotyczy Bootstrap 4.
— Randell
6

żadne z sugerowanych powyżej rozwiązań nie działało dla mnie, ale ta technika rozwiązała problem:

$('#myModal').on('shown.bs.modal', function() {
   //To relate the z-index make sure backdrop and modal are siblings
   $(this).before($('.modal-backdrop'));
   //Now set z-index of modal greater than backdrop
   $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
— Javed Iqbal
źródło
Wolę tak, ponieważ straciłem formatowanie CSS innymi metodami.
— Eugene van der Merwe
6

Miałem ten problem i najłatwiejszym sposobem, aby go naprawić, był addind z-index większy niż 1040 na div modal-dialog:

<div class="modal-dialog" style="z-index: 1100;">

Wierzę, że bootstrap tworzy efekt modalnego tła div, w którym w moim przypadku ma indeks Z 1040, więc jeśli umieścisz na nim modalne okno dialogowe, nie powinno być już szare.

— Chris Rosete
źródło
6

Mam lżejsze i lepsze rozwiązanie ..

Można to łatwo rozwiązać za pomocą dodatkowych stylów CSS.

  1. ukryj klasę .modal-backdrop(automatycznie generowane z Bootstrap.js)

    .modal-backdrop
{
display:none;
visibility:hidden; 
position:relative
}

  2. ustaw tło .modalpółprzezroczystego czarnego tła.

    .modal
{
background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png")
// translucent image from google images 
z-index:1100; 
}

Działa to najlepiej, jeśli masz wymaganie, aby modal znajdował się wewnątrz elementu, a nie w pobliżu </body>znacznika.

— Koszulka JM
źródło
Uratowałeś mi dzień ... To miła alternatywa!
— notme
@xunga, nie martw się. podziel się tym rozwiązaniem z innymi ludźmi :)
— JM Tee
możesz zobaczyć zmiany tutaj ... stackoverflow.com/posts/42887253/revisions
— notme
Dzięki JM, twoje rozwiązanie było jedynym, które działało dla mnie.
— Ahmed J.
5

ustaw najwyższą wartość dla indeksu Z.modal

Na przykład .sidebarwrapper ma indeks Z wynoszący 1100, więc ustaw indeks Z .modal na 1101

.modal {
    z-index: 1101;
}
— Mohudum Kamil
źródło
5

W moim przypadku rozwiąż to, dodaj to do mojego arkusza stylów:

.modal-backdrop{
  z-index:0;
}
Rozwiń fragment kodu

za pomocą debugera Google może badać element BACKDROP i modyfikować atrybuty. Powodzenia.

— Ckevyn Ovalle
źródło
3

w pasku nawigacyjnym navbar-fixed-toppotrzebujesz, z-index = 1041 a także, jeśli używasz bootstarp-combined.min.cssrównież zmiany .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

— Mohsin
źródło
3

Możesz także usunąć indeks Z z .modal-background. Wynikowy css wyglądałby tak.

.modal-backdrop {
}
  .modal-backdrop.in {
    opacity: .35;
    filter: alpha(opacity=35); }
— Matthew Gallegos
źródło
3

Usunąłem modalne tło.

.modal-backdrop {
    display:none;
}

To nie jest lepsze rozwiązanie, ale działa dla mnie.

— CodeBriefly
źródło
3

to co znajduję to:

w bootstrap 3.3.0 to nie jest poprawne, ale gdy w bootstrap 3.3.5 jest w porządku. zobacz kod. 3.3.0:

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
    .prependTo(this.$element)

3.3.5

  this.$backdrop = $(document.createElement('div'))
        .addClass('modal-backdrop ' + animate)
        .appendTo(this.$body)
— ttong
źródło
3

Dodaj to do stron. To działa dla mnie.

<script type="text/javascript">
    $('.modal').parent().on('show.bs.modal', function (e) { $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
</script>
— Takei
źródło
3

Naprawiłem to, dodając styl poniżej do tagu DIV

style="background-color: rgba(0, 0, 0, 0.5);"

I dodaj niestandardowy css

.modal-backdrop {position: relative;}
— RaymondLe
źródło
3

Dla mnie najprostszym rozwiązaniem było umieszczenie mojego modalu w opakowaniu z pozycją bezwzględną i wskaźnikiem Z wyższym niż .modal-background. Ponieważ tło modalne (przynajmniej w moim przypadku) ma indeks Z 1050:

.my-modal-wrapper {
  position: absolute;
  z-index: 1060;
}
<div class="my-modal-wrapper"></div>
Rozwiń fragment kodu

— sivi911
źródło
Z-index działał dla mnie. Wielkie dzięki.
— Asif Iqbal
2

W moim przypadku miałem opakowanie z następującymi elementami:

.wrapper { margin: 0 auto; position:relative; z-index:1;overflow:hidden;}

Usunąłem tylko indeks Z: 1 i nie mam pojęcia, dlaczego naprawiono problem. też na pewno usunąłem względną pozycję, ale jej potrzebowałem.

— hsobhy
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.