Pionowo wyśrodkowane okno modalne Bootstrap

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);
        }
    })

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;
}

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));

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%;
}

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;
}

<!-- 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;
}

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%;
}

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.

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

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.

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.

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/

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

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

// closes the modal on click/tap below/above the modal

$('.modal-dialog').on('click tap', function(e){
    if (e.target.classList.contains('modal-dialog')) {
    $('.modal').modal('hide');
  }
})

.modal-dialog {
  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-y: auto;
  min-height: -webkit-calc(100vh - 60px);
  min-height: -moz-calc(100vh - 60px);
  min-height: calc(100vh - 60px);
}
@media (max-width: 767px) {
  .modal-dialog {
    min-height: -webkit-calc(100vh - 20px);
    min-height: -moz-calc(100vh - 20px);
    min-height: calc(100vh - 20px);
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


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

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <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>
</div>

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);
  }
}

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ć.

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;
}

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%;
}

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

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;
}

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));

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;
}

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);
});

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)
    });

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);
});

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});

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ż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;
}

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.

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%;
   }

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>