Вертикально центрирующееся модальное окно 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/

Он использует вспомогательный 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" вместо transform. Кроме того, я использую событие «показ» вместо «показ», потому что после него произошел очень плохой скачок позиционирования (видно, когда у вас есть анимация начальной загрузки). Обязательно установите отображение «block» перед позиционированием, в противном случае $ 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ключевое слово после top. Это заставляет браузер использовать это значение и игнорировать любые другие значения для ключевого слова. Это имеет тот недостаток, что вы не можете переопределить значение где-либо еще.

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

Это работает для меня отлично:

.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

Начиная с Bootstrap 4, следующий класс был добавлен для достижения этой цели без JavaScript.

modal-dialog-centered

Вы можете найти их документацию здесь .

Спасибо vd за то, что вы указали, что вам нужно добавить оба .modal-dialog-центрированные к .modal-dialog для вертикального центрирования модала.

ты можешь использовать:

.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было бы здорово, но, похоже, он будет добавлен только после завершения перехода, что слишком поздно и делает некоторые действительно плохие переходы. К счастью, кажется, что bootstrap всегда применяет атрибут стиля к модалу, как только начинает показывать, так что это немного странно, но работает.

Эта :not([style='display: none;'])часть является обходным путем для начальной загрузки, при которой не удаляется атрибут style, а вместо этого при закрытии диалогового окна вместо отображения стиля устанавливается значение 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, и применяющий класс к телу страницы, но этот уровень разработки интерфейса довольно устойчив, и вам все равно нужен запасной вариант.

Я хотел бы призвать людей принять будущее Интернета. Flexbox потрясающий, и вы должны начать использовать его, если можете.

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

РЕДАКТИРОВАТЬ: В случае двух модальных на одной странице, это должно относиться к .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

Нужно еще доработать его.

Для тех, кто использует загрузчик 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. Boostrap модал добавляет .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.centered фиксированным и правильно расположенным.

CSS

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

Или даже проще, используя flexbox.

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

Это берет ответ Arany и заставляет его работать, если модальное значение выше, чем высота экрана:

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

Сделать модальный вертикально выровнять диалог All All.

/* Заметка:

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 добавить и в модальном добавить это «централизовать» как класс.

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

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

Вертикально по центру Добавьте .modal-dialog-центрированный к .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>