Pionowo wyśrodkowane okno modalne Bootstrap

181

Chciałbym wyśrodkować mój modal na okienku ekranu (w środku) Próbowałem dodać pewne właściwości css

 .modal { position: fixed; top:50%; left:50%; }   

Korzystam z tego przykładu http://jsfiddle.net/rniemeyer/Wjjnd/

próbowałem

$("#MyModal").modal('show').css(
    {
        'margin-top': function () {
            return -($(this).height() / 2);
        },
        'margin-left': function () {
            return -($(this).width() / 2);
        }
    })
użytkownik2613813
źródło
Postaraj się zastąpić .modal.fade.in, a także
haim770
Spróbuj tego: github.com/jschr/bootstrap-modal
John Magnolia
3
Spróbuj tego zerosixthree.se/… Używam: .modal.fade.in {top: 50%; transform: translateY (-50%); }
Jowan Sebastian
Dodano rozwiązanie flexbox (ten translateY(-50%)uniemożliwia dostęp do modalu, gdy zawartość modalna jest wyższa niż wysokość urządzenia).
tao
Począwszy od bootstrap 4, modalne okno dialogowe zostało dodane, że nie jest to już konieczne. Przejrzyj tę odpowiedź poniżej.
jcaruso

Odpowiedzi:

258

Wykonuje to zadanie: http://jsfiddle.net/sRmLV/1140/

Używa helper-div i trochę niestandardowego css. Nie wymaga javascript ani jQuery.

HTML (na podstawie kodu demonstracyjnego Bootstrap )

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

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</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>
    </div>
</div>

CSS

.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}
RNobel
źródło
Dzięki temu rozwiązaniu ze względu na wysokość: 100%; i szerokość: 100%; nie można zamknąć modułów, klikając je. Czy możesz wymyślić poprawkę dla tego @Rens de Nobel?
pcatre
1
Ok, to rozwiązanie wydaje się działać świetnie (poza tym, że powstrzymuje mnie przed zamykaniem modułów przez kliknięcie ich). Ale w jakiś sposób powoduje to, że niektóre moje testy e2e z kątomierzem kończą się niepowodzeniem (i nie mogę znaleźć powodu, dla którego nie wydaje się, aby był to błąd). W każdym razie wracam do odpowiedzi w javascript, więc nie tracę na tym więcej czasu. Ale tak jak powiedziałem, wydaje się, że działa dobrze, ostrzegając tylko ludzi wykonujących testy e2e z kątomierzem, aby uważali.
pcatre
3
@pcatre, dzięki za wskazówkę! Zaktualizowałem kod z poprawką do tego. Ustawianie zdarzeń wskaźnika: brak; na klasach wyrównania załatwia sprawę. Testowane w IE11, najnowszym Chrome i Firefox oraz iOS Safari.
RNobel
4
Nie jestem pewien, czy to zostało zaktualizowane, ponieważ komentarze użytkowników mówiące, że to nie działa, po kliknięciu wewnętrznych elementów modalnych, ale na razie działa to dla mnie w 100%, korzystając z przykładu z Fiddle powyżej. Dziękuję bardzo za pomoc i wszystkie powyższe komentarze.
Michael G,
2
Począwszy od bootstrap 4, modalne okno dialogowe zostało dodane, że nie jest to już konieczne. Przejrzyj tę odpowiedź poniżej.
jcaruso
94

Ponieważ odpowiedź gpcoli nie działała dla mnie, edytowałem trochę, więc teraz działa. Użyłem „margin-top” zamiast transformacji. Ponadto używam zdarzenia „pokaż” zamiast „pokazanego”, ponieważ po tym dało mi to bardzo zły skok pozycjonowania (widoczny, gdy masz animacje ładowania początkowego). Pamiętaj, aby ustawić wyświetlanie na „blokuj” przed pozycjonowaniem, w przeciwnym razie $ dialog.height () wyniesie 0, a modal nie zostanie całkowicie wyśrodkowany.

(function ($) {
    "use strict";
    function centerModal() {
        $(this).css('display', 'block');
        var $dialog  = $(this).find(".modal-dialog"),
        offset       = ($(window).height() - $dialog.height()) / 2,
        bottomMargin = parseInt($dialog.css('marginBottom'), 10);

        // Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
        if(offset < bottomMargin) offset = bottomMargin;
        $dialog.css("margin-top", offset);
    }

    $(document).on('show.bs.modal', '.modal', centerModal);
    $(window).on("resize", function () {
        $('.modal:visible').each(centerModal);
    });
}(jQuery));
Arany
źródło
6
Ten jest idealny! Po prostu zamiast $ (dokument) .height () poprawne jest użycie $ (okno) .height () w linii 4. Plus Zmieniłbym ostatnią linię na: $('.modal:visible').each(centerModal);
Denis Chmel
Działa mi idealnie, dziękuję. kiedy używamy tego kodu, musimy również ustawić dopełnianie górnej i dolnej części modalnego okna dialogowego na 0px, aby uzyskać idealne centrowanie.
mina morsali
Zrywa się, jeśli modal jest wyższy niż wysokość okna. Więc dodałem następujący wiersz tuż przed ustawieniem marginesu okna dialogowego: if(offset < 0) offset = 0; Wklejam cały blok w przypadek odpowiedzi, który nie jest jasny!
jetlej
Dodałem kilka dalszych zmian, aby górny margines był równy dolnemu marginesowi modalu, w odpowiedzi poniżej
jetlej
Idealnie, brakowało $ (this) .css ('display', 'block'); cały czas i zastanawiałem się, dlaczego wysokość wynosiła 0.
Jānis Gruzis
81

To właśnie zrobiłem dla mojej aplikacji. Jeśli spojrzysz na następujące klasy w pliku bootstrap.css. Dialog -modal ma domyślnie dopełnienie 10px i ekran @media, a (min-szerokość: 768px) .modal-dialog ma górne dopełnienie ustawione na 30px. Tak więc w moim niestandardowym pliku css ustawiłem górne wypełnienie na 15% dla wszystkich ekranów bez określania szerokości ekranu multimediów. Mam nadzieję że to pomoże.

.modal-dialog {
  padding-top: 15%;
}
użytkownik1279047
źródło
6
działa to tylko dla małych skrzynek typu alret, a nie dla dużych skrzynek
mina morsali
Możesz po prostu zastosować do małych modalności:.modal-dialog.modal-sm { padding-top:15%; }
Dunc
61

Najlepszy sposób, jaki znalazłem dla wszystkich przeglądarek HTML5:

body.modal-open .modal {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal .modal-dialog {
    margin: auto;
}
taha shahid
źródło
2
Podobało mi się to rozwiązanie, bardzo czyste. Nie jestem pewien co do wersji Safari na komputery stacjonarne lub starsze, ale wydaje się być w porządku na iOS 8.
Nicolas Galler
1
Tak, zgadzam się z @NicolasGaller. Dla mnie też działa dobrze. Testowałem w Chrome i Firefox. To dobrze działa.
Manjunath Reddy,
2
Jest to świetne postępujące ulepszenie tylko w css. Nie wymaga js, a każda przeglądarka, która nie obsługuje Flexboksa, uzyska domyślne ustawienie modalne bootstrap.
Craig Harshbarger
Zamknij, ale nie można zamknąć modałów, gdy na stronie jest więcej niż jeden. Zobacz moją odpowiedź poniżej, aby to naprawić.
Robert McKee
1
Aktualizacja: Dodawanie align-items: center;do body.modal-open .modalwydaje się działać.
bernie
20
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="table">
        <div class="table-cell">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</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>
        </div>
    </div>
</div>

// Style

.table {
 display: table;
 height:100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
użytkownik3389
źródło
3
To jest uniwersalna odpowiedź. Nie wiem, dlaczego nikt na to nie głosował.
Csaba Toth,
3
Przejrzałem co najmniej 4 wpisy SO, każdy z tuzinem propozycji. BTW, w wieku HTML5 powinno to być wbudowane w funkcjonalność przynajmniej w niektórych ramach. Zamiast żonglować.
Csaba Toth,
1
Uwaga: jeśli powiesz szerokość: 100% dla stylu tabeli, otrzymasz poziome centrowanie (w przypadku, gdy modal nie jest ukryty przed przepełnieniem).
Csaba Toth,
1
Jak dotąd najlepsza odpowiedź. Spowoduje to utworzenie paska przewijania, ale można go wyłączyć, czyniąc .modal-open .modal {overflow-y: hidden; }
Christophe
14

Górny parametr jest zastępowany w .modal.fade.in, aby wymusić wartość ustawioną w deklaracji niestandardowej, dodaj !importantsłowo kluczowe po górze. Zmusza to przeglądarkę do użycia tej wartości i zignorowania innych wartości słowa kluczowego. Ma to tę wadę, że nie można zastąpić wartości nigdzie indziej.

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
}
Alexander Varwijk
źródło
To uniemożliwia mi zamknięcie modalu po kliknięciu na tło o modalu.
Scott Simpson
13

Począwszy od Bootstrap 4, dodano następującą klasę, aby to osiągnąć bez JavaScript.

modal-dialog-centered

Ich dokumentację można znaleźć tutaj .

Dzięki vd za wskazanie, musisz dodać oba .modal-dialog-center-to .modal-dialog, aby pionowo wyśrodkować modal.

jcaruso
źródło
1
To najlepsza odpowiedź na bootstrap 4.
broc.seib,
przez dodanie modal-dialog i modal-dialog-centered ma lepszy wynik
vd
1
@vd to zrozumiałe, biorąc pod uwagę dokumentację: „Dodaj .modal-dialog-wyśrodkowany do .modal-dialog, aby pionowo wyśrodkować modal”. Zaktualizuję moją odpowiedź, aby odzwierciedlić to również dla tych, którzy jej nie złapali.
jcaruso
12

to działa dla mnie idealnie:

.modal {
text-align: center;
padding: 0!important;
}

.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}

.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}

pełny adres URL wersji demo : https://codepen.io/dimbslmh/full/mKfCc

AmirHossein Manian
źródło
11

możesz użyć:

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
    transform: translate(-50%, -50%);
}

aby wyśrodkować go zarówno pionowo, jak i poziomo.

Aryeh Armon
źródło
2
To jest prawdziwe „jak wyśrodkować coś” za pomocą CSS bez korzystania z Flex. Fakt, że kontekstem jest Bootstrap lub modal, powinien być nieistotny. Wszystkie pozostałe odpowiedzi są zbyt przesadne.
ESR
1
Dzięki tej metodzie, jeśli modal jest wyższy niż wysokość ekranu urządzenia, górna część modalu staje się niedostępna.
tao
11

Ponieważ większość odpowiedzi tutaj nie działała lub działała tylko częściowo:

body.modal-open .modal[style]:not([style='display: none;']) {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal[style]:not([style='display: none;']) .modal-dialog {
    margin: auto;
}

Musisz użyć selektora [styl], aby zastosować styl tylko na modale, który jest obecnie aktywny, a nie na wszystkich modalach. .inbyłby świetny, ale wydaje się, że jest dodawany dopiero po zakończeniu przejścia, które jest za późno i powoduje niektóre naprawdę złe przejścia. Na szczęście wygląda na to, że bootstrap zawsze stosuje atrybut stylu do modalu tak, jak zaczyna się pokazywać, więc jest to trochę zhackowane, ale działa.

:not([style='display: none;'])Część jest obejście bootstrap nie prawidłowo usuwanie atrybutu stylu i zamiast ustawiania wyświetlacza stylu none po zamknięciu okna dialogowego.

Robert McKee
źródło
Wielkie dzięki. To właściwie jedyna rzecz, która działała w 2016 r.
AlexioVay
Minęły 4 lata. Nadal przydatne. Dzięki stary!
Hassan Nomani
8

Możesz osiągnąć pionowe centrum wyrównania na modale Bootstrap 3 w następujący sposób:

.modal-vertical-centered {
  transform: translate(0, 50%) !important;
  -ms-transform: translate(0, 50%) !important; /* IE 9 */
  -webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */
}

i dodaj tę klasę css do kontenera „modal-dialog”

<div class="modal-dialog modal-vertical-centered">
...

Przykład działania jsFiddle: http://jsfiddle.net/U4NRx/

EGurelli
źródło
Jak dokładnie wyśrodkowuje okno dialogowe w pionie?
gkalpak
Działa świetnie w większości miejsc, ale nie działa w opakowanych aplikacjach HTML5 niższych niż Android 4.4.
Josh
3
Mój modal znalazł się na
minusie
1
TAK! Używam: .modal.fade.in {góra: 50%; transform: translateY (-50%); }
Jowan Sebastian
Po prostu zmodyfikuj 50% do 15%, a następnie okno dialogowe będzie znajdować się w środku okna. .modal-vertical-centered {transform: tłumacz (0, 15%)! ważne; -ms-transform: tłumacz (0, 15%)! ważne; / * IE 9 / -webkit-transform: tłumacz (0, 15%)! Ważne; / Safari i Chrome * /}
Haimei
8

Najczystszym i najprostszym sposobem na to jest użycie Flexbox! Poniższe polecenie wyrówna pionowo modal Bootstrap 3 na środku ekranu i jest o wiele czystszy i prostszy niż wszystkie inne rozwiązania tutaj zamieszczone:

body.modal-open .modal.in {
  display: flex !important;
  align-items: center;
}

UWAGA: Chociaż jest to najprostsze rozwiązanie, może nie działać dla wszystkich ze względu na obsługę przeglądarki: http://caniuse.com/#feat=flexbox

Wygląda na to, że (jak zwykle) IE pozostaje w tyle. W moim przypadku wszystkie produkty, które tworzę dla siebie lub dla klientów, to IE10 +. (inwestowanie czasu programowania w obsługę starszych wersji IE nie ma sensu z biznesowego punktu widzenia, gdy można go wykorzystać do faktycznego opracowania produktu i szybszego uzyskania MVP). Z pewnością nie jest to luksus, który każdy ma.

Widziałem, jak większe witryny wykrywają, czy Flexbox jest obsługiwany, i stosują klasę do treści strony - ale ten poziom inżynierii front-end jest dość solidny i nadal potrzebujesz rezerwy.

Zachęcałbym ludzi do przyjęcia przyszłości sieci. Flexbox jest niesamowity i powinieneś zacząć go używać, jeśli możesz.

PS - Ta strona naprawdę pomogła mi uchwycić Flexbox jako całość i zastosować go do każdego przypadku użycia: http://flexboxfroggy.com/

EDYCJA: W przypadku dwóch modów na jednej stronie, powinno to dotyczyć .modal.in

Greg Blass
źródło
Działa to inaczej, ale animacja zamykania nie wygląda dobrze.
user2061057
Czy powinien być w stanie wykonać animację z przejściami CSS3?
Greg Blass,
7

Zalety:

  • zawartość modalna dostępna nawet, gdy jest wyższa niż urządzenie
  • nie używa display:table-cell(to nie jest przeznaczone dla układów)
  • nie wymaga modyfikacji domyślnego modalu Bootstrap 3 markup
  • pozycjonowanie to czysty CSS. Dodano JS do zamykania modułu po kliknięciu / dotknięciu poniżej i powyżej
  • Podałem nieprefiks SCSSdla tych, którzy używają gulplubgrunt

Uwaga : Zamierzam aktualizować tę odpowiedź zgodnie z najnowszymi specyfikacjami Bootstrap 3. W przypadku rozwiązania Bootstrap 4 zapoznaj się z tą odpowiedzią (na razie są one mniej więcej takie same, ale z czasem mogą się różnić). Jeśli znajdziesz jakiś błąd lub problem z nim, daj mi znać, a ja zaktualizuję. Dzięki.


Czysty, bez prefiksu SCSS(do użytku z gulp/ grunt):

.modal-dialog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  min-height: calc(100vh - 60px);
  @media (max-width: 767px) {
    min-height: calc(100vh - 20px);
  }
}
tao
źródło
2
Najlepsze rozwiązanie IMO.
Radmation,
3

Kolejne rozwiązanie CSS. Nie działa w przypadku wyskakujących okienek, które są większe niż port widoku.

.modal-dialog {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: 0;
    margin-bottom: 0; 
}
.modal.fade .modal-dialog {
    transition: top 0.4s ease-out;
    transform: translate(0, -50%);
    top: 0;
}
.modal.in .modal-dialog {
    transform: translate(0, -50%);
    top: 50%;
}

W .modal-dialogklasie przesłanianie pozycji do absolutnej (z względnej) i centrowanie treściright:0, left: 0

Podczas .modal.fade .modal-dialog , .modal.in .modal-dialogustawiania animacji przejścia topzamiast tłumaczenia.

margin-topprzesuwa wyskakujące okienko nieco poniżej środka w przypadku małych wyskakujących okienek, a w przypadku długich wyskakujących okienek modal utknął w nagłówku. W związku z tymmargin-top:0, margin-bottom:0

Musisz go jeszcze udoskonalić.

pravin
źródło
3

Dla tych, którzy używają Angular-ui bootstrap, możesz dodać poniższe klasy na podstawie powyższych informacji:

Uwaga: Żadne inne zmiany nie są potrzebne i powinno rozwiązać wszystkie modały.

// The 3 below classes have been placed to make the modal vertically centered
.modal-open .modal{
    display:table !important;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}

.modal-dialog{
    display: table-cell;
    vertical-align: middle;
    pointer-events: none;
}

.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}
Jyotirmoy Pan
źródło
3

Nie ma potrzeby używania javascript. Boostrap modal dodaje. W klasie, gdy się pojawi. Wystarczy zmodyfikować tę kombinację klas za pomocą modalclassName.fade.in za pomocą Flex css i gotowe.

dodaj ten css, aby wyśrodkować modal w pionie i poziomie.

.modal.fade.in {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.modal.fade.in .modal-dialog {
    width: 100%;
}
Nikt
źródło
2

Mój wybór, tylko trochę CSS: (NIE działa w IE8)

.modal.fade .modal-dialog {
    transform: translate(-50%, -80%);
}

.modal.in .modal-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0px;
}

Możesz grać z pierwszą regułą, aby zmienić wygląd modalu.

Używanie: Bootstrap 3.3.4

John Bernardsson
źródło
2

Wystarczy dodać następujący CSS do istniejącego, działa dla mnie dobrze

.modal {
  text-align: center;
}
@media screen and (min-width: 768px) {
    .modal:before {
      display: inline-block;
      vertical-align: middle;
      content: " ";
      height: 100%;
    }
}
.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}
Shankar Prakash G.
źródło
2

Na podstawie odpowiedzi Arany , ale także uwzględnienia przewijania strony.

(function($) {
    "use strict";
    function positionModals(e) {
        var $this = $(this).css('display', 'block'),
            $window = $(window),
            $dialog = $this.find('.modal-dialog'),
            offset = ($window.height() - $window.scrollTop() - $dialog.height()) / 2,
            marginBottom = parseInt($dialog.css('margin-bottom'), 10);

        $dialog.css('margin-top', offset < marginBottom ? marginBottom : offset);
    }

    $(document).on('show.bs.modal', '.modal', positionModals);

    $(window).on('resize', function(e) {
        $('.modal:visible').each(positionModals);
    });
}(jQuery));
Mathieu
źródło
2

Myślę, że jest to nieco czystsze rozwiązanie CSS niż rozwiązanie Rensa de Nobela. Nie uniemożliwia to również zamknięcia okna dialogowego przez kliknięcie poza nim.

http://plnkr.co/edit/JCGVZQ?p=preview

Wystarczy dodać klasę CSS do kontenera DIV z klasą .modal-dialog, aby uzyskać wyższą specyficzność niż bootstraps CSS, np. Skoncentrowany.

HTML

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog centered modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

I spraw, aby ten kontener .modal-dialog. Wyśrodkowany był stały i odpowiednio ustawiony.

CSS

.modal .modal-dialog.centered {
    position: fixed;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
}

Lub jeszcze prościej przy użyciu Flexbox.

CSS

.modal {
    display: flex;
    align-items: center;
    justify-content: center;
}
Vit Koumar
źródło
Ta wersja Flexbox nie działa zgodnie z oczekiwaniami. Podczas testowania najnowszego Chrome (52.0.x) .modal-dialog jest poprawnie wyśrodkowany, ale jego interakcja z treścią wydaje się zawieszona na starym miejscu (dziwnie). Możesz jednak spróbować użyć tej techniki bezpośrednio w .modal-dialog (nie w .modal), a przy niektórych innych właściwościach wydaje się, że działa. =)
giovannipds
2

.modal.in .modal-dialog {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Michael Oxborrow
źródło
1

Działa to w BS3, nie testowano w v2. Centruje modal pionowo. Zauważ, że tam przejdzie - jeśli chcesz, aby pojawił się w pozycji, edytuj transitionwłaściwość CSS dla.modal-dialog

centerModal = function() {
    var $dialog = $(this).find(".modal-dialog"),
        offset = ($(window).height() - $dialog.height()) / 2;

    // Center modal vertically in window
    $dialog.css({
        'transform': 'translateY(' + offset + 'px) !important',
    });
};

$('.modal').on('shown.bs.modal', centerModal);
$(window).on("resize", function() {
    $('.modal').each(centerModal);
});
gpcola
źródło
1
e(document).on('show.bs.modal', function () {
        if($winWidth < $(window).width()){
            $('body.modal-open,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',$(window).width()-$winWidth)
        }
    });
    e(document).on('hidden.bs.modal', function () {
        $('body,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',0)
    });
Tomtom
źródło
Czy możesz wyjaśnić, jaka jest funkcja „e” w twojej odpowiedzi?
Michael Butler
1

To bierze odpowiedź Arany i sprawia, że ​​działa, jeśli modal jest wyższy niż wysokość ekranu:

function centerModal() {
    $(this).css('display', 'block');
    var $dialog = $(this).find(".modal-dialog");
    var offset = ($(window).height() - $dialog.height()) / 2;
    //Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
    var bottomMargin = $dialog.css('marginBottom');
    bottomMargin = parseInt(bottomMargin);
    if(offset < bottomMargin) offset = bottomMargin;
    $dialog.css("margin-top", offset);
}

$('.modal').on('show.bs.modal', centerModal);
$(window).on("resize", function () {
    $('.modal:visible').each(centerModal);
});
jetlej
źródło
Hej @jetlej, dlaczego po prostu nie edytujesz odpowiedzi Arany, żeby to uwzględnić? Rozwiązujesz duży błąd w jego kodzie.
pcatre
@pcatre - nie wiedziałem, że mogę przesyłać zmiany! Dzięki za zwrócenie na to uwagi
jetlej
1

Aby dodać pionowe centrowanie modalne do bootstrap modal.js, dodałem to na końcu Modal.prototype.showfunkcji:

var $modalDialog = $('.modal-dialog'),
        modalHeight = $modalDialog.height(),
        browserHeight = window.innerHeight;

    $modalDialog.css({'margin-top' : modalHeight >= browserHeight ? 0 : (browserHeight - modalHeight)/2});
Andersra
źródło
Nie będzie działać dobrze, jeśli okno dialogowe zmieni wysokość raz pokazane, ze względu na zmianę rozmiaru strony lub rzeczy w niej rozszerzane / zwinięte.
Dirbaio,
0

Aby ustawić modalnie w pionie okno dialogowe Wyrównaj środkowe wszystko.

/* Uwaga:

1. Nawet jeśli nie musisz przypisywać selektora, znajdzie on wszystkie modalne dokumenty i ustawi je pionowo w środku

2. Aby uniknąć środkowej konkretnej modalności, aby być jej środkiem, możesz użyć: nie selektora w zdarzeniu kliknięcia

* /

 $( "[data-toggle='modal']" ).click(function(){
     var d_tar = $(this).attr('data-target'); 
     $(d_tar).show();   
     var modal_he = $(d_tar).find('.modal-dialog .modal-content').height(); 
     var win_height = $(window).height();
     var marr = win_height - modal_he;
     $('.modal-dialog').css('margin-top',marr/2);
  });

Z Mediolanu Pandya

użytkownik 3690101
źródło
0

Użyj tego prostego skryptu, który wyśrodkuje modale.

Jeśli chcesz, możesz ustawić niestandardową klasę (np. .Modal.modal-vcenter zamiast .modal), aby ograniczyć funkcjonalność tylko do niektórych modów.

var modalVerticalCenterClass = ".modal";

function centerModals($element) {
    var $modals;
    if ($element.length) {
      $modals = $element;
    } else {
    $modals = $(modalVerticalCenterClass + ':visible');
}
$modals.each( function(i) {
    var $clone = $(this).clone().css('display', 'block').appendTo('body');
    var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
    top = top > 0 ? top : 0;
    $clone.remove();
    $(this).find('.modal-content').css("margin-top", top);
});
}
$(modalVerticalCenterClass).on('show.bs.modal', function(e) {
    centerModals($(this));
});
$(window).on('resize', centerModals);

Dodaj również tę poprawkę CSS dla poziomych odstępów modalu; pokazujemy zwój na modach, przewijanie ciała jest automatycznie ukryte przez Bootstrap:

/* scroll fixes */
.modal-open .modal {
  padding-left: 0px !important;
  padding-right: 0px !important;
  overflow-y: scroll;
}
Rakesh Vadnal
źródło
0

Kolejna odpowiedź CSS na to pytanie ...
To rozwiązanie wykorzystuje CSS tylko w celu osiągnięcia pożądanego efektu przy jednoczesnym zachowaniu możliwości zamknięcia modułu poprzez kliknięcie poza nim. Umożliwia także ustawienie .modal-contentmaksymalnych wysokości i szerokości, aby wyskakujące okienko nie rosło poza okienkiem ekranu. Przewiń pojawi się automatycznie, gdy zawartość wzrośnie poza rozmiar modalny.

Uwaga:
Zalecany Bootstrap .modal-dialog divpowinien zostać pominięty, aby działał poprawnie (wydaje się, że nic nie psuje). Testowane w Chrome 51 i IE 11.

Kod CSS:

.modal {
   height: 100%;
   width: 100%;
}

.modal-content {
   margin: 0 auto;
   max-height: 600px;
   max-width: 50%;
   overflow: auto;
   transform: translateY(-50%);
}

EDIT:.modal-dialog klasa pozwala wybrać, czy użytkownik może zamknąć modal klikając poza samą modalnej. Większość modałów ma wyraźny przycisk „zamknij” lub „anuluj”. Pamiętaj o tym podczas korzystania z tego obejścia.

dsanchez
źródło
0

Najlepszym rozwiązaniem do scentralizowania modalu z szerokością i wysokością jest dodanie w css i modalne dodanie tej „centralizacji” jako klasy.

.centralize{
   position:absolute;
   left:50%;
   top:50%;

   background-color:#fff;
   transform: translate(-50%, -50%);
   width: 40%; //specify watever u want
   height: 50%;
   }
jogurt mhetre
źródło
0

Wyśrodkowany pionowo Dodaj .modal-dialog-wyśrodkowany do .modal-dialog, aby pionowo wyśrodkować modal

Uruchom wersję demo

<!-- 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="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</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>
Tayyab Roy
źródło