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);
}
})
javascript
twitter-bootstrap
bootstrap-modal
użytkownik2613813
źródło
źródło
.modal.fade.in
, a takżetranslateY(-50%)
uniemożliwia dostęp do modalu, gdy zawartość modalna jest wyższa niż wysokość urządzenia).Odpowiedzi:
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 )
CSS
źródło
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.
źródło
$('.modal:visible').each(centerModal);
if(offset < 0) offset = 0;
Wklejam cały blok w przypadek odpowiedzi, który nie jest jasny!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.
źródło
.modal-dialog.modal-sm { padding-top:15%; }
Najlepszy sposób, jaki znalazłem dla wszystkich przeglądarek HTML5:
źródło
align-items: center;
dobody.modal-open .modal
wydaje się działać.// Style
źródło
Górny parametr jest zastępowany w .modal.fade.in, aby wymusić wartość ustawioną w deklaracji niestandardowej, dodaj
!important
sł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.źródło
Począwszy od Bootstrap 4, dodano następującą klasę, aby to osiągnąć bez JavaScript.
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.
źródło
to działa dla mnie idealnie:
pełny adres URL wersji demo : https://codepen.io/dimbslmh/full/mKfCc
źródło
możesz użyć:
aby wyśrodkować go zarówno pionowo, jak i poziomo.
źródło
Ponieważ większość odpowiedzi tutaj nie działała lub działała tylko częściowo:
Musisz użyć selektora [styl], aby zastosować styl tylko na modale, który jest obecnie aktywny, a nie na wszystkich modalach.
.in
był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.źródło
Możesz osiągnąć pionowe centrum wyrównania na modale Bootstrap 3 w następujący sposób:
i dodaj tę klasę css do kontenera „modal-dialog”
Przykład działania jsFiddle: http://jsfiddle.net/U4NRx/
źródło
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:
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
źródło
Zalety:
display:table-cell
(to nie jest przeznaczone dla układów)markup
SCSS
dla tych, którzy używajągulp
lubgrunt
Pokaż fragment kodu
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 zgulp
/grunt
):źródło
Kolejne rozwiązanie CSS. Nie działa w przypadku wyskakujących okienek, które są większe niż port widoku.
W
.modal-dialog
klasie przesłanianie pozycji do absolutnej (z względnej) i centrowanie treściright:0, left: 0
Podczas
.modal.fade .modal-dialog , .modal.in .modal-dialog
ustawiania animacji przejściatop
zamiast tłumaczenia.margin-top
przesuwa 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ć.
źródło
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.
źródło
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.
źródło
Mój wybór, tylko trochę CSS: (NIE działa w IE8)
Możesz grać z pierwszą regułą, aby zmienić wygląd modalu.
Używanie: Bootstrap 3.3.4
źródło
Wystarczy dodać następujący CSS do istniejącego, działa dla mnie dobrze
źródło
Na podstawie odpowiedzi Arany , ale także uwzględnienia przewijania strony.
źródło
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
I spraw, aby ten kontener .modal-dialog. Wyśrodkowany był stały i odpowiednio ustawiony.
CSS
Lub jeszcze prościej przy użyciu Flexbox.
CSS
źródło
źródło
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
transition
właściwość CSS dla.modal-dialog
źródło
źródło
To bierze odpowiedź Arany i sprawia, że działa, jeśli modal jest wyższy niż wysokość ekranu:
źródło
Aby dodać pionowe centrowanie modalne do bootstrap modal.js, dodałem to na końcu
Modal.prototype.show
funkcji:źródło
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
* /
Z Mediolanu Pandya
źródło
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.
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:
źródło
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-content
maksymalnych 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
div
powinien zostać pominięty, aby działał poprawnie (wydaje się, że nic nie psuje). Testowane w Chrome 51 i IE 11.Kod CSS:
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.źródło
Najlepszym rozwiązaniem do scentralizowania modalu z szerokością i wysokością jest dodanie w css i modalne dodanie tej „centralizacji” jako klasy.
źródło
Wyśrodkowany pionowo Dodaj .modal-dialog-wyśrodkowany do .modal-dialog, aby pionowo wyśrodkować modal
Uruchom wersję demo
źródło