Вертикальне центральне модальне вікно Bootstrap

Я хотів би сконцентрувати модальний режим у вікні перегляду (посередині), я намагався додати деякі властивості css

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

Я використовую цей приклад http://jsfiddle.net/rniemeyer/Wjjnd/

я намагався

$("#MyModal").modal('show').css(
    {
        'margin-top': function () {
            return -($(this).height() / 2);
        },
        'margin-left': function () {
            return -($(this).width() / 2);
        }
    })

Це робить роботу: http://jsfiddle.net/sRmLV/1140/

Він використовує helper-div та деякі користувальницькі css. Не потрібно JavaScript або jQuery.

HTML (на основі демо-коду 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;
}

Оскільки відповідь gpcola для мене не спрацювала, я трохи відредагував, і тепер вона працює. Я використовував "margin-top" замість трансформації. Крім того, я використовую "показ" замість "показаного" події, тому що після цього він дав мені дуже поганий стрибок позиціонування (видно, коли у вас анімація завантаження). Обов'язково встановіть дисплей "блокувати" перед позиціонуванням, інакше $ dialog.height () буде 0, а модальний не буде повністю зосереджений.

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

Це я зробив для свого додатка. Якщо ви подивитеся на наступні класи у файлі bootstrap.css .modal-dialog має вкладене за замовчуванням 10px та екран @media та (min-width: 768px) .modal-dialog має верхню підкладку, встановлену на 30px. Таким чином, у власному файлі css я встановив, що верхнє накладка становить 15% для всіх екранів, не вказуючи ширину екрана медіа. Сподіваюся, це допомагає.

.modal-dialog {
  padding-top: 15%;
}

Найкращий спосіб, який я знайшов для всіх браузерів 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>

// Стилі

.table {
 display: table;
 height:100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}

Верхній параметр переосмислюється в .modal.fade.in, щоб примусити значення, встановлене у вашій спеціальній декларації, додати !importantключове слово після початку. Це змушує браузер використовувати це значення та ігнорувати будь-які інші значення для ключового слова. Це має той недолік, що ви не можете змінити значення ніде більше.

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

Станом на Bootstrap 4 був доданий наступний клас, щоб досягти цього для вас без JavaScript.

modal-dialog-centered

Ви можете знайти їх документацію тут .

Дякуємо vd за вказівку, вам потрібно додати обидва .modal-dialog -centtered .modal-dialog, щоб вертикально центрувати модальний.

це прекрасно працює для мене:

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

заповніть демонстраційну URL-адресу: https://codepen.io/dimbslmh/full/mKfCc

Ви можете використовувати:

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

центрувати його як вертикально, так і горизонтально.

Тому що більшість відповідей тут не спрацювала або лише частково спрацювала:

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

Ви повинні використовувати селектор [style], щоб застосувати стиль лише до модального режиму, який зараз активний, а не до всіх модалів. .inбуло б чудово, але це, мабуть, додається лише після завершення переходу, який занадто пізно і спричинить деякі по-справжньому погані переходи. На щастя, видається, що завантажувач завжди застосовує атрибут стилю на модалі так само, як він починає показувати, так що це трохи хакітно, але це працює.

Ця :not([style='display: none;'])частина - це спосіб вирішення проблеми завантаження, не видаляючи атрибут стилю правильно, а замість того, щоб встановити відображення стилю до жодного, коли ви закриєте діалогове вікно.

Ви можете досягти центру вертикального вирівнювання на модалі Bootstrap 3 таким чином:

.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 */
}

і додайте цей клас css до контейнера "модальний діалог"

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

Приклад роботи jsFiddle: http://jsfiddle.net/U4NRx/

Найчистіший і найпростіший спосіб зробити це - використовувати Flexbox! Далі буде вертикально вирівнювати модаль Bootstrap 3 в центрі екрана і він набагато чистіший і простіший за всі інші рішення, розміщені тут:

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

ПРИМІТКА. Хоча це найпростіше рішення, воно може працювати не для всіх завдяки підтримці браузера: http://caniuse.com/#feat=flexbox

Схоже, що (як правило) IE відстає. У моєму випадку всі продукти, які я розробляю для себе або для клієнтів, є IE10 +. (Не має сенсу для бізнесу розумно вкладати час на розробку, підтримуючи старіші версії IE, коли це можна було б використати для розробки продукту та швидшого виходу MVP). Це, звичайно, не розкіш, яку мають усі.

Я бачив, як більші веб-сайти визначають, підтримується чи ні флексбокс, і застосовують клас до основної частини сторінки - але цей рівень фронтальної інженерії є досить надійним, і вам все одно знадобиться резервний запас.

Я б закликав людей сприймати майбутнє Інтернету. Flexbox є приголомшливим, і ви можете почати використовувати його, якщо зможете.

PS - Цей веб-сайт справді допоміг мені зрозуміти флексбокс у цілому та застосувати його до будь-якого випадку використання: http://flexboxfroggy.com/

EDIT: У разі двох модалів на одній сторінці це має стосуватися .modal.in

Переваги:

• модальний вміст, доступний навіть тоді, коли він вище, ніж пристрій
• не використовується display:table-cell(це не призначено для макетів)
• не вимагає жодних модифікацій за замовчуванням Bootstrap 3 markup
• позиціонування - це чистий CSS. JS додається для закриття модального клацання / натискання внизу та над ним
• Я включив без префікса SCSSдля тих, хто використовує gulpабоgrunt

// 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>

Примітка. Цю відповідь я маю намір оновлювати останніми специфікаціями Bootstrap 3. Щодо рішення Bootstrap 4, дивіться цю відповідь (на даний момент вони більш-менш однакові, але з часом вони можуть розходитися). Якщо ви виявите помилку або проблему, повідомте мене, і я оновлю. Дякую.

Чистий, без префіксації SCSS(для використання з 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);
  }
}

Ще одне рішення CSS. Не працює для спливаючих вікон, які перевищують порт перегляду.

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

У .modal-dialogкласі переосмислення позиції на абсолютне (від відносного) та центрування змістуright:0, left: 0

В .modal.fade .modal-dialog , .modal.in .modal-dialogналаштуваннях анімації переходу над , topа не на переклад.

margin-topпереміщує спливаюче вікно трохи нижче центру у разі невеликого спливаючого вікна, а у разі тривалого спливаючого вікна модальний застряг із заголовком. Звідсиmargin-top:0, margin-bottom:0

Потрібно додатково уточнити його.

Для тих, хто використовує bogularstrap angular-ui, можна додати нижчезазначені класи на основі наведеної вище інформації:

Примітка: інших змін не потрібно, і вони повинні вирішити всі способи.

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

Не потрібно нам JavaScript. Модальний завантажувач додає .in клас, коли він з'являється. Просто змініть цю комбінацію класів з modalclassName.fade.in за допомогою flex css, і ви закінчите.

додайте цей css до центру модалу вертикально та горизонтально.

.modal.fade.in {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.modal.fade.in .modal-dialog {
    width: 100%;
}

Мій вибір, лише невеликий CSS: (НЕ працює в 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;
}

Ви можете грати з першим правилом, щоб змінити, як виглядає модальний.

Використання: Bootstrap 3.3.4

Просто додайте наступний CSS до наявного, він працює для мене чудово

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

На основі відповіді Арані , а також обліку прокрутки сторінки.

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

Я думаю, що це дещо чистіше чисте рішення CSS, ніж рішення Ренса де Нобеля. Також це не заважає закрити діалогове вікно, клацнувши поза ним.

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

Просто додайте якийсь клас CSS до контейнера DIV з класом .modal-dialog, щоб отримати більш високу специфічність, ніж CSS для завантаження, наприклад .centered.

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>

І зробіть цей .modal-dialog.centrated контейнер фіксованим та правильним.

CSS

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

Або ще простіше, використовуючи флексбокс.

CSS

.modal {
    display: flex;
    align-items: center;
    justify-content: center;
}

Це працює в BS3, не перевіряється в v2. Він центрує модально вертикально. Зауважте, що він буде перехід туди - якщо ви хочете, щоб він просто з'явився у редагуванні transitionвластивості CSS для.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)
    });

Це вимагає відповіді Арані і змушує її працювати, якщо модаль перевищує висоту екрана:

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

Щоб додати вертикальне модальне центрування до bootstrap modal.js, я додав це в кінці Modal.prototype.showфункції:

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

    $modalDialog.css({'margin-top' : modalHeight >= browserHeight ? 0 : (browserHeight - modalHeight)/2});

Щоб встановити модуль вертикально, вирівняйте діалогове вікно "Середнє все".

/* Примітка:

1. Якщо вам не потрібно призначити селектор, він знайде весь модальний документ і зробить його вертикально посередині

2.Щоб уникнути середнього деякого конкретного модалу, щоб бути його центром, ви можете використовувати: не селектор у події клацання

* /

 $( "[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);
  });

Від Мілана Панді

Скористайтеся цим простим сценарієм, який центрирує модалі.

Якщо ви хочете, ви можете встановити спеціальний клас (наприклад: .modal.modal-vcenter замість .modal), щоб обмежити функціональність лише деякими модами.

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

Також додайте це виправлення CSS для горизонтального проміжку модалу; ми показуємо прокрутку на модалях, скрутки тіла автоматично приховані Bootstrap:

/* scroll fixes */
.modal-open .modal {
  padding-left: 0px !important;
  padding-right: 0px !important;
  overflow-y: scroll;
}

Ще одна відповідь CSS на це запитання ...
Це рішення використовує CSS лише для досягнення бажаного ефекту, зберігаючи при цьому можливість закрити модальний клавішу, клацнувши поза ним. Це також дозволяє встановити .modal-contentмаксимум висоти та ширини, щоб спливаючі вікна не зростали за межами області перегляду. Прокрутка автоматично з’явиться, коли вміст перевищить модальний розмір.

Примітка:
Рекомендовану програму Bootstrap .modal-dialog divслід опустити, щоб це нормально працювало (схоже, нічого не порушує). Тестовано в Chrome 51 та IE 11.

Код 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 клас дозволяє вибрати , чи може користувач закрити модальний, клацнувши поза самого модальний. У більшості модалів є чітка кнопка "закрити" або "скасувати". Майте це на увазі, використовуючи цей спосіб вирішення.

Найкраще рішення для централізації вашого модаля за шириною та висотою - в css add і в модальному режимі додайте цей «централізатор» як клас ..

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

   background-color:#fff;
   transform: translate(-50%, -50%);
   width: 40%; //specify watever u want
   height: 50%;
   }

Вертикально-по центру Додайте .modal-dialog-centered to .modal-dialog, щоб вертикально центрувати модальний

Запустіть демонстраційний модал

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