Вертикально центрирующееся модальное окно Bootstrap

181

Я хотел бы центрировать мой модал в области просмотра (в середине) Я попытался добавить некоторые свойства 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);
        }
    })
user2613813
источник
Попробуйте отменить , .modal.fade.inа также
haim770
Попробуйте с этим: github.com/jschr/bootstrap-modal
Джон Магнолия,
3
Попробуйте это zerosixthree.se/… Я использую: .modal.fade.in {top: 50%; transform: translateY (-50%); }
Джован Себастьян
Добавлено решение для флексбокса (которое translateY(-50%)делает верх модальной недоступной, когда модальное содержимое выше высоты устройства).
Дао
Начиная с начальной загрузки 4 было добавлено модальное диалоговое окно, что в этом больше нет необходимости. Пожалуйста, просмотрите ответ ниже.
января

Ответы:

258

Это делает работу: 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;
}
RNobel
источник
С этим решением, из-за высоты: 100%; и ширина: 100%; Вы не можете закрыть модалы, щелкнув по модалу. Можете ли вы найти решение этой проблемы @Rens de Nobel?
pcatre
1
Хорошо, это решение отлично работает (за исключением того, что оно мешает мне закрыть модалы, щелкнув по ним). Но каким-то образом это приводит к тому, что некоторые из моих тестов e2e с транспортиром проваливаются (и я не могу найти причину, по которой это не похоже на ошибку). В любом случае, я возвращаюсь к ответу javascript, поэтому я не теряю больше времени на этом. Но, как я уже сказал, похоже, что это работает нормально, просто предупреждая людей, выполняющих тесты e2e с транспортиром, на что обратить внимание.
pcatre
3
@pcatre, спасибо за совет! Я обновил код с исправлением для этого. Установка событий указателя: нет; на выравнивание классов делает свое дело. Протестировано в IE11, последней версии Chrome, Firefox и iOS Safari.
RNobel
4
Не уверен, что это было обновлено, так как комментарии пользователей говорят, что это не работает, по щелчку внутри модальных элементов, но на данный момент это на 100% работает для меня, используя пример в Fiddle выше. Большое спасибо за вашу помощь и все комментарии выше.
Майкл Дж
2
Начиная с начальной загрузки 4 было добавлено модальное диалоговое окно, что в этом больше нет необходимости. Пожалуйста, просмотрите ответ ниже.
jcaruso
94

Поскольку ответ 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));
Арань
источник
6
Этот идеален! Просто вместо $ (document) .height () правильно использовать $ (window) .height () в строке 4. Плюс я бы изменил последнюю строку на: $('.modal:visible').each(centerModal);
Denis Chmel
Это работает для меня отлично, спасибо. когда мы используем этот код, мы также должны установить верхний и нижний отступы модального диалога в 0px для идеального центрирования.
Мина Морсали
Это нарушается, если модальное значение выше высоты окна. Поэтому я добавил следующую строку прямо перед установкой поля в верхней части диалогового окна: if(offset < 0) offset = 0; я вставляю весь блок в случай ответа, который не ясен!
jetlej
Я добавил некоторые дальнейшие изменения, чтобы верхний край был равен нижнему краю модального, в ответе ниже
jetlej
Отлично, не было $ (this) .css ('display', 'block'); все время думал и думал, почему рост был 0.
Янис Грузис
81

Это то, что я сделал для своего приложения. Если вы посмотрите на следующие классы в файле bootstrap.css, то у .modal-dialog есть отступ по умолчанию 10px и экран @media и (min-width: 768px) .modal-dialog имеет верхний отступ, установленный на 30px. Таким образом, в моем собственном файле CSS я установил верхний отступ равным 15% для всех экранов без указания ширины экрана мультимедиа. Надеюсь это поможет.

.modal-dialog {
  padding-top: 15%;
}
user1279047
источник
6
это работает только для маленьких коробочек с алретами, а не для больших коробок
Мина Морсали
Вы можете просто применить к маленьким модалам:.modal-dialog.modal-sm { padding-top:15%; }
Дунк
61

Лучший способ, который я нашел для всех браузеров HTML5:

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

body.modal-open .modal .modal-dialog {
    margin: auto;
}
таха шахид
источник
2
Мне понравилось это решение, очень чистый. Не уверен насчет настольных или более старых версий Safari, но, похоже, на iOS 8 это нормально.
Николас Галлер
1
Да, я согласен с @NicolasGaller. Это хорошо работает и для меня. Я тестировал в Chrome и Firefox. Это работает хорошо.
Манджунат Редди
2
Это отличное прогрессивное улучшение только для CSS. Не требуется js, и любой браузер, который не поддерживает flexbox, получит модальное размещение начальной загрузки по умолчанию.
Крейг Харшбаргер
Закрыть, но это лишает возможности закрывать модалы, когда на странице их несколько. Смотрите мой ответ ниже, чтобы исправить.
Роберт Макки
1
Обновление: добавление align-items: center;к, body.modal-open .modalкажется, работает.
Берни
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>

// Стили

.table {
 display: table;
 height:100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
user3389
источник
3
Это универсальный ответ. Я не знаю, почему никто не голосовал за это.
Чаба Тот
3
Я прошел по крайней мере 4 SO записи с дюжиной предложений. Кстати, в возрасте HTML5 это должно быть встроено в функциональность, по крайней мере, в некоторые рамки. Вместо жонглирования.
Чаба Тот
1
Также обратите внимание: если вы скажете width: 100% для стиля таблицы, вы получите горизонтальное центрирование (в случае, если режим не скрыт переполнением).
Чаба Тот
1
Лучший ответ на сегодняшний день. Это создает полосу прокрутки, но вы можете отключить ее, сделав .modal-open .modal {overflow-y: hidden; }
Кристоф
14

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

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
}
Александр Варвийк
источник
Это не позволяет мне закрывать модальное окно при нажатии на фон о модальном режиме.
Скотт Симпсон
13

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

.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

Амир Хоссейн Маниан
источник
13

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

modal-dialog-centered

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

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

jcaruso
источник
1
Это лучший ответ для bootstrap 4.
broc.seib
путем добавления как модальный-диалог и модальный-диалог в центре имеет лучший результат
VD
1
@vd, что понятно, учитывая, что в документации сказано: «Добавьте .modal-dialog-центрированный к .modal-dialog для вертикального центрирования модального окна». Я обновлю свой ответ, чтобы отразить это и для тех, кто этого не понял.
JCaruso
11

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

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

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

Арье Армон
источник
2
Это истинное «как что-то центрировать» с помощью CSS без использования Flex. Тот факт, что контекст является Bootstrap или модальным, не имеет значения. Все остальные ответы слишком излишни.
ESR
1
При использовании этого метода, если модальное значение выше высоты экрана устройства, верхняя часть модального слоя становится недоступной.
Дао
11

Поскольку большая часть ответа здесь не сработала или сработала только частично:

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.

Роберт Макки
источник
Отлично, спасибо. Это на самом деле единственное, что сработало в 2016 году.
AlexioVay
Прошло 4 года. Все еще полезно. Спасибо друг!
Хасан Номани
8

Вы можете добиться вертикального выравнивания по центру на 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/

EGurelli
источник
Как именно он центрирует диалог по вертикали?
Гкалпак
Прекрасно работает в большинстве мест, но не работает в оболочках html5-приложений ниже Android 4.4.
Джош
3
Мой модал был вниз по странице с этим
Дориан
1
АГА! Я использую: .modal.fade.in {top: 50%; transform: translateY (-50%); }
Джован Себастьян,
Просто измените 50% на 15%, и тогда диалог будет в центре окна. .modal-вертикально-центрированный {transform: translate (0, 15%)! важный; -ms-transform: translate (0, 15%)! важный; / * IE 9 / -webkit-transform: translate (0, 15%)! Важный; / Safari and Chrome * /}
Хаймэй,
8

Самый простой и простой способ сделать это - использовать 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

Грег Бласс
источник
В противном случае это работает хорошо, но анимация закрытия выглядит не очень хорошо.
user2061057
Должны ли быть в состоянии выполнить анимацию с переходами CSS3?
Грег Бласс
7

Преимущества:

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

Примечание . Я намерен поддерживать этот ответ в актуальном состоянии с учетом последних спецификаций 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);
  }
}
дао
источник
2
Лучшее решение ИМО.
Радмация
3

Еще одно решение 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

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

Pravin
источник
3

Для тех, кто использует загрузчик 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;
}
Jyotirmoy Пан
источник
3

Не надо нам 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%;
}
Ни один. Никто
источник
2

Мой выбор, немного 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

Джон Бернардссон
источник
2

Просто добавьте следующий 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;
}
Шанкар Пракаш Г
источник
2

На основании ответа Арани , но и с учетом прокрутки страницы.

(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));
Матье
источник
2

Я думаю, что это более чистое решение 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;
}
Вит Кумар
источник
Эта версия flexbox не работает должным образом. При тестировании на последнем Chrome (52.0.x) диалог .modal правильно отцентрирован, но его взаимодействие с контентом кажется застывшим на старом месте (странно). Тем не менее, вы можете попробовать использовать эту технику прямо в .modal-диалоге (не в .modal), и с некоторыми другими свойствами, похоже, он работает. =)
giovannipds
1

Это работает в 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);
});
gpcola
источник
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
источник
Не могли бы вы уточнить, что функция «е» в вашем ответе?
Майкл Батлер
1

Это берет ответ 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);
});
jetlej
источник
Эй, @jetlej, почему бы тебе не отредактировать ответ Арани, чтобы включить это? Вы решаете большую ошибку в его коде.
pcatre
@pcatre - я не знал, что смогу внести изменения! Спасибо за указание на это
jetlej
1

Чтобы добавить вертикальное модальное центрирование в 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});
andersra
источник
Не будет хорошо работать, если диалоговое окно изменяет высоту, как только показывается, из-за изменения размера страницы или содержимого внутри него, разворачивается / сворачивается.
Дирбайо
0

Сделать модальный вертикально выровнять диалог 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);
  });

Из Милана Пандья

user3690101
источник
0

Используйте этот простой скрипт, который центрирует модалы.

Если вы хотите, вы можете установить собственный класс (например: .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;
}
Ракеш Ваднал
источник
0

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

dsanchez
источник
0

Лучшее решение для централизации вашего модального с шириной и высотой, в CSS добавить и в модальном добавить это «централизовать» как класс.

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

   background-color:#fff;
   transform: translate(-50%, -50%);
   width: 40%; //specify watever u want
   height: 50%;
   }
Йогеш Метре
источник
0

Вертикально по центру Добавьте .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>
Тайяб Рой
источник