Modal Bootstrap pojawiający się pod tłem
Użyłem kodu modalnego prosto z przykładu Bootstrap i włączyłem tylko bootstrap.js (a nie Bootstrap-modal.js). Jednak mój modal pojawia się pod szarym zanikiem (tłem) i nie można go edytować.
Oto Jak to wygląda:
Zobacz Ten skrzypek dla Jeden sposób na odtworzenie tego problemu. Podstawowa struktura tego kodu wygląda następująco:
<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;
}
Jakieś pomysły, dlaczego tak jest lub co mogę zrobić, aby naprawić to?
30 answers
Jeśli kontener modalny ma stałą lub względną pozycję lub znajduje się w elemencie o stałej lub względnej pozycji, Takie zachowanie wystą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ć:
- najprostszym sposobem jest po prostu przesunięcie modalnego div tak, aby znajdował się poza dowolnymi elementami ze specjalnym pozycjonowaniem. Jedno dobre miejsce może być tuż przed zamykającym tag ciała
</body>
. - 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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-18 21:12:47
Problem ma związek z pozycjonowaniem kontenerów nadrzędnych. Możesz łatwo "przenieść" swój modal z tych kontenerów przed wyświetlaniem go. Oto jak to zrobić, jeśli byłeś show
ing modal używając js:
$('#myModal').appendTo("body").modal('show');
Lub, jeśli uruchomisz modal za pomocą przycisków, upuść .modal('show');
i po prostu zrób:
$('#myModal').appendTo("body")
To zachowa wszystkie normalne funkcje, pozwalając na wyświetlenie modalu za pomocą przycisku.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-07 17:11:46
Próbowałem wszystkich opcji podanych powyżej, ale nie udało mi się ich użyć.
Co zadziałało: Ustawienie indeksu z .modal-tło do -1.
.modal-backdrop {
z-index: -1;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-14 01:07:16
Upewnij się również, że wersje Bootstrap css i js są takie same. Różne wersje mogą również sprawić, że modalne pojawią się 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>
Dobre:
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-28 07:43:34
Również napotkałem ten problem i Żadne z rozwiązań nie działało dla mnie, dopóki nie zorientowałem się, że nie potrzebuję tła. Możesz łatwo usunąć tło za pomocą następującego 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 : atrybut data-backdrop
musi być ustawiony na false
(inne opcje: static
lub true
).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-24 11:16:07
Dostałem go do pracy, dając wysoką wartość z-index do okna modalnego Po otwarciu. Np.:
$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-12-12 07:24:39
Rozwiązanie dostarczone przez @Muhd jest najlepszym sposobem, aby to zrobić. Ale jeśli utknąłeś w sytuacji, w której zmiana struktury strony nie jest opcją, Użyj 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">×</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);"
usuwając domyślne tło i tworząc atrapę, ustawiając kolor tła samego okna za pomocą Alfy.
Update 1: Jak zauważył @Gustyn, kliknięcie w tło nie zamyka okna dialogowego tak, jak jest to oczekiwane. Więc do aby to osiągnąć, musisz dodać trochę kodu java script. Oto kilka przykładów, jak można to osiągnąć.
$('.modal').click(function(event){
$(event.target).modal('hide');
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-09 06:00:35
A ale późno na to, 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 podczas korzystania ze stałego paska bocznego Po szczegóły.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:02:48
Innym sposobem jest usunięcie indeksu z .modal-backdrop
w bootstrap.css. Spowoduje to, że tło będzie na tym samym poziomie, co reszta ciała (nadal będzie blaknąć), a Twój modal będzie na wierzchu.
.modal-backdrop
wygląda tak
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000000;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-26 01:41:21
Wystarczy dodać dwie linie CSS:
.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}
The .modal-backdrop powinien mieć wartość 1050 aby ustawić ją nad paskiem navbara.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-28 21:51:34
Po prostu ustawiłem:
#myModal {
z-index: 1500;
}
I działa....
Na pytanie pierwotne:
.my-module {
z-index: 1500;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-12 16:02:29
Ten problem często występuje podczas używania gradientów w CSS do takich rzeczy jak tła lub nawet nagłówki akordeonów.
Niestety, modyfikowanie lub nadpisywanie core Bootstrap CSS jest niepożądane i może prowadzić do niepożądanych efektów ubocznych. Najmniej inwazyjnym podejściem jest dodanie 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ązywać ten problem bez niechcianej strony efekty.
Pobierz: https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip
Pamiętaj, aby dołączyć pliki CSS i pliki JavaScript z 3.3.5.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-10 04:10:39
Witam miałem ten sam problem wtedy zdaję sobie sprawę, że gdy używasz bootsrap 3.1 W przeciwieństwie do starszych wersji bootsrap (2.3.2) struktura html modalu została zmieniona!
Musisz owinąć ciało nagłówka modalnego i stopkę za pomocą 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-12 08:27:47
Miałem ten problem i najprostszym sposobem na jego naprawienie był addind z-index większy niż 1040 w modal-dialog Div:
<div class="modal-dialog" style="z-index: 1100;">
Wierzę, że Bootstrap tworzy fade modal-tło div, w którym w moim przypadku ma indeks z 1040, więc jeśli umieścisz okno modal-dialog na górze, nie powinno być już szare.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-08 16:58:08
Użyj tego w modalu:
data-backdrop="false"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-14 15:27:52
Żadne z powyższych rozwiązań nie zadział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);
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-05 11:40:36
Ustaw indeks Z.modal do najwyższej wartości
Na przykład, .sidebarwrapper ma indeks z 1100, więc ustaw Indeks z .modal to 1101
.modal {
z-index: 1101;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-03 06:42:38
Mam lżejsze i lepsze rozwiązanie..
Można go łatwo rozwiązać za pomocą dodatkowych stylów CSS..
-
Ukryj klasę
.modal-backdrop
(automatycznie wygenerowaną z Bootstrap.js).modal-backdrop { display:none; visibility:hidden; position:relative }
-
Ustaw tło
.modal
na przezroczyste czarne tło..modal { background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png") // translucent image from google images z-index:1100; }
Będzie to działać najlepiej, jeśli masz wymóg, który wymaga, aby modal znajdował się wewnątrz elementu, a nie w pobliżu tagu </body>
..
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-19 14:07:28
W moim przypadku Rozwiąż to, dodaj to w moim arkuszu stylów:
.modal-backdrop{
z-index:0;
}
Z Google debugger, może badać tło elementu i modyfikować atrybuty. Goog luck.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-11 21:53:15
In your navbar navbar-fixed-top
need z-index = 1041
a także jeśli u użyć bootstarp-combined.min.css
również zmienić .navbar-fixed-top, .navbar-fixed-bottom
z-index to 1041
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-08 10:57:29
Zmień pozycję absolutną na względną.
.modal-backdrop {
position: relative;
/* ... */
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-19 02:48:48
Możesz również usunąć Indeks z .modal-tło. Powstały css wyglądałby tak.
.modal-backdrop {
}
.modal-backdrop.in {
opacity: .35;
filter: alpha(opacity=35); }
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-05 20:38:23
Znajduję to, że:
W bootstrap 3.3.0 to nie jest w porządku, ale gdy w bootstrap 3.3.5 to jest w porządku.zobaczmy 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)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-23 10:00:51
$('.modal').insertAfter($('body'));
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-17 01:12:24
Obejmowałoby to wszystkie Modale bez zakłócania animacji lub oczekiwanego zachowania..
$(document).on('show.bs.modal', '.modal', function () {
$(this).appendTo('body');
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-05 04:22:05
W moim przypadku miałem opakowanie z następującym:
.wrapper { margin: 0 auto; position:relative; z-index:1;overflow:hidden;}
Usunąłem tylko z-index: 1 i nie mam pojęcia, dlaczego Naprawiono problem. również na pewno usunięcie względnej pozycji nie, ale potrzebowałem go.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-21 07:04:01
W moim przypadku przyczyną był boostrap./ min.css:) kiedy wyłączyłem go z pliku html jako referencję, okno dialogowe pokazywało się w forn odcień modalny:)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-23 14:21:37
Usunąłem tło modalne.
.modal-backdrop {
display:none;
}
To nie jest lepsze rozwiązanie, ale działa dla mnie.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-07 17:04:39
Naprawiłem to dodając styl poniżej do znacznika DIV
style="background-color: rgba(0, 0, 0, 0.5);"
I dodaj własny css
.modal-backdrop {position: relative;}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-05 03:48:53
Spróbuj nadpisać klasę .modal - Otwarta wartość przepełnienia od ukrytej do widocznej.
.modal-open {
overflow: visible;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-09 23:19:53