Jak wyrównać w pionie okna dialogowe Modalne Bootstrap v4
Pionowo środkowe dialogi modalne w Bootstrap 4.
Uwaga: poniższe wymagania zostały dodane, aby było jasne, że szukam właściwe sposób na wyśrodkowanie modalu Bootstrap, obejmujący wszystkie możliwe przypadki, na wszystkich możliwych urządzeniach, we wszystkich przeglądarkach. W moim przypadku, chciałem go dla dużego SPA ponowne użycie tego samego modalu w całej aplikacji, więc potrzebowałem go do pracy w każdym przypadku.
Powinno:
- zachowaj dostęp do treści modalnych, na wszystkich urządzeniach, nawet jeśli są one wyższe niż Wysokość urządzenia
- Praca na dowolnym urządzeniu + przeglądarce z udziałem w rynku większym niż
1%
Nie używaj - Zamknij na
click
lubtap
gdziekolwiek poza.modal-content
(w tym powyżej i poniżej). - ogranicz użycie jQuery / JavaScript w jak największym stopniu
- (opcjonalnie) praca na domyślnych przykładach Bootstrap bez potrzeby znaczników modyfikacje
display:table-cell
ani podobnych hacków (Dowolna technika tworzenia układów Nie przeznaczona lub zaprojektowana do tworzenia układów)
6 answers
Aktualizacja, począwszy od wersji Beta 3, [docs]:
Dodaj
.modal-dialog-centered
do.modal-dialog
, aby wyśrodkować modal w pionie.
Oryginalna odpowiedź:
SCSS
:
.modal-dialog {
min-height: calc(100vh - 60px);
display: flex;
flex-direction: column;
justify-content: center;
overflow: auto;
@media(max-width: 768px) {
min-height: calc(100vh - 20px);
}
}
Lub CSS
:
.modal-dialog {
min-height: calc(100vh - 60px);
display: flex;
flex-direction: column;
justify-content: center;
overflow: auto;
}
@media(max-width: 768px) {
.modal-dialog {
min-height: calc(100vh - 20px);
}
}
Uwaga 1: Uwaga W pełni prefiksowy CSS stopniowo staje się przestarzały, ponieważ obsługa przeglądarek dla pewnych zmian właściwości. Poprawnym sposobem uzyskania zaktualizowanego prefiksu CSS jest:
- kopiuj / wklej przerobiony CSS na Autoprefixer.
- ustaw filtr w dolnym polu na żądane ustawienie (dla maks. korzystanie z obsługi przeglądarki
> 0%
). - Pobierz najnowszy kod z pudełka po prawej stronie.
Uwaga 2: Ta odpowiedź została dodana we wczesnych etapach v4 (alfa 3 lub 4), która obecnie znajduje się w beta . Możesz bezpiecznie zastąpić część CSS tej odpowiedzi, dodając następujące klasy do .modal-dialog
:
h-100 d-flex flex-column justify-content-center my-0
... jak zauważył @Androbaut w komentarzu poniżej. Aby zamknąć okno modalne na click tap
poniżej/powyżej okna modalnego, nadal będziesz potrzebował JavaScript (patrz poniżej).
jQuery
(potrzebne do zamknięcia modalnego kliknięcia / dotknięcia powyżej / poniżej):
$('.modal-dialog').on('click tap', function(e){
if ($(e.target).hasClass('modal-dialog')) {
$('.modal').modal('hide');
}
})
To jest to.
Działający fragment, w pełni prefiksowany CSS i znaczniki przy użyciu różnych rozmiarów modalnych:
$('.modal-dialog').on('click tap', function(e){
if ($(e.target).hasClass('modal-dialog')) {
$('.modal').modal('hide');
}
})
.modal-dialog {
min-height: -webkit-calc(100vh - 60px);
min-height: -moz-calc(100vh - 60px);
min-height: calc(100vh - 60px);
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: auto;
}
@media (max-width: 768px) {
.modal-dialog {
min-height: -webkit-calc(100vh - 20px);
min-height: -moz-calc(100vh - 20px);
min-height: calc(100vh - 20px);
}
}
/* you don't need the CSS below this line. It's mainly cosmetic and for aligning the modal launch buttons */
.modal-content {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.modal-content > * {
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-moz-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.modal-content > *.modal-body {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
#Modal_2 .modal-content {
min-height: 50vh;
}
#Modal_3 .modal-content {
min-height: 85vh;
}
#Modal_4 .modal-content {
min-height: 200vh;
}
.full-page-center {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 100vh;
}
.full-page-center button {
margin: 15px;
}
@media (max-width: 768px) {
.full-page-center {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.full-page-center button {
display: block;
min-width: 100%;
margin: 10px 15px;
}
.full-page-center::after {
display: none;
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-moz-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<div class="container full-page-center">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#Modal_1">
Tiny modal
</button>
<button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#Modal_2">
Normal modal
</button>
<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#Modal_3">
Large modal
</button>
<button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#Modal_4">
Very large modal
</button>
</div>
<div class="modal fade" id="Modal_1" tabindex="-1" role="dialog" aria-labelledby="modalLabel_1" aria-hidden="true">
<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="modalLabel_1">Tiny modal</h4>
</div>
<div class="modal-body">
I am cute...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="Modal_2" tabindex="-1" role="dialog" aria-labelledby="modalLabel_2" aria-hidden="true">
<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="modalLabel_2">Dull modal</h4>
</div>
<div class="modal-body">
I am normal...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Some action</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="Modal_3" tabindex="-1" role="dialog" aria-labelledby="modalLabel_3" aria-hidden="true">
<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="modalLabel_3">Don't call me fat</h4>
</div>
<div class="modal-body">
Call me "oversized".
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Some action</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="Modal_4" tabindex="-1" role="dialog" aria-labelledby="modalLabel_4" aria-hidden="true">
<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="modalLabel_4">Huge modal</h4>
</div>
<div class="modal-body">
Comments, anyone?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-warning">Some action</button>
</div>
</div>
</div>
</div>
Jeśli znajdziesz jakieś błędy lub niedociągnięcia proszę pozwolić ja wiem. Poświęcę trochę czasu, aby poprawić odpowiedź i zachować ją przydatną. Pomoc w tym zadaniu jest mile widziana.
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-01-17 15:00:07
Oto proste podejście Flexbox.
SCSS
.modal-open .modal {
display: flex!important;
align-items: center!important;
.modal-dialog {
flex-grow: 1;
}
}
Demo Robocze
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-04 13:01:32
Innym prostym sposobem, aby modalne wyrównanie pionowe jest dostosowanie top: 50%;
, transform: translateY(-50%);
i margin: 0 auto
do klasy modal dialog.
Edit:
Minusem jest to, że musisz również ustawić max-height: 100vh;
na .modal-content
. W przeciwnym razie Góra modal nie jest już dostępna, gdy modal jest coraz wyższy niż viewport.
Demo:
.modal.vertically-modal .modal-dialog {
transform: translateY(-25%);
top: 50%;
margin: 0 auto;
}
.modal.vertically-modal.show .modal-dialog {
transform: translateY(-50%);
}
.modal-content {
max-height: 100vh;
overflow-y: auto;
padding: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js "></script>
<button class="btn btn-primary" data-toggle="modal" data-target=".vertically-modal">Show modal</button>
<div class="modal fade vertically-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
Vertically modal
</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
2017-06-28 18:08:19
Istnieje o wiele łatwiejszy sposób na osiągnięcie tego celu bez konieczności pisania kilku nadpisań CSS lub innych niestandardowych CSS, w zasadzie używając tylko klas stock bootstrap i dodając jeden dodatkowy element HTML, aby kontrolować wysokość.
CSS (nie jest potrzebny patrz niżej)
.modal > .row{
flex: 1;
}
HTML (aktualizacja patrz poniżej)
<div id="dialogBox" class="modal fade d-flex">
<div class="row justify-content-center"> <!-- Vertically Align Modal -->
<div class="modal-dialog align-self-center" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Następnie użyć:
JS
$("#dialogBox").modal('show');
LUB HTML
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#dialogBox">
Launch demo modal
</button>
Prawdopodobnie istnieje sposób na osiągnięcie pożądanego rezultatu za pomocą tylko bootstrap .row
, .col
i klasy, ale nie udało mi się tego zrobić.
Ostatnia uwaga, być może będziesz musiał dodać: <body class="d-flex">
aby wszystko działało w zależności od reszty twojego CSS.
UPDATE
Istnieje sposób, aby to osiągnąć, używając tylko klas bootstrap, h-100
i w-100
:
<div id="dialogBox" class="modal fade d-flex">
<div class="row justify-content-center w-100"> <!-- Vertically Align Modal -->
<div class="modal-dialog align-self-center" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</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
2017-08-22 11:52:34
To rozwiązanie działa dla małych i długich modali, które wymagają przewijania.
Dodaj te niestandardowe reguły css:
.modal-header {
flex-shrink: 0;
}
.modal-body {
overflow-y: auto;
}
I dodać te klasy:
- do
modal-dialog
:h-100 my-0 mx-auto d-flex flex-column justify-content-center
- do
modal-content
:m-2
Tak:
<div class="modal-dialog h-100 my-0 mx-auto d-flex flex-column justify-content-center" role="document">
<div class="modal-content m-2">
...
</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
2017-11-28 12:56:39
Dodaj .modal-dialog-centered to .modal-okno dialogowe do wyśrodkowania modalu w pionie.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</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
2018-08-28 04:57:26