Bootstrap 3 модальное вертикальное положение центра


270

Это вопрос из двух частей:

  1. Как вы можете расположить модально вертикально в центре, если вы не знаете точную высоту модала?

  2. Возможно ли иметь модальное центрирование и иметь переполнение: auto в модальном теле, но только если модальное стекло превышает высоту экрана?

Я попытался с помощью этого:

.modal-dialog {
  height: 80% !important;
  padding-top:10%;
}

.modal-content {
  height: 100% !important;
  overflow:visible;
}

.modal-body {
  height: 80%;
  overflow: auto;
}

Это дает мне результат, который мне нужен, когда контент намного больше, чем вертикальный размер экрана, но для небольшого модального контента он практически бесполезен.


1
@Heiken почему-то заставляет меня прыгать вниз по экрану, я использую хром
Свен ван ден Бугаарт

Ответы:


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

И немного подкорректируйте класс .fade, чтобы он появлялся за верхней границей окна, а не по центру


Я на самом деле переопределил это по ошибке, спасибо, что указал на то, что это действительно работает за кулисами.
Дориан

Это, вероятно, лучший способ центрировать по вертикали не только модальный бутстрап, но и все остальное. css-tricks.com/centering-in-the-unknown
Марк С

4
Я уточняю, что это не очень хорошо работает на мобильном телефоне. Потому что определение «: после» имеет высоту 100% и может автоматически перемещать модал вниз страницы. Я только что решил объявить .modal {display: flex! Важно;} .modal-dialog {margin: auto}. 92,97% людей уже поддерживают использование этого свойства CSS, однако для общего suporte может использовать JavaScript для установки полей.
Уолтер Чапилликен - wZVanG

21
Абсолютно здорово, но я бы рекомендовал использовать его только выше 768 пикселей и оставить настройку по умолчанию на мобильном телефоне. Верхняя позиция лучше всего подходит для модалов, когда высота экрана мала. Я также настроил анимацию, чтобы она отображалась по центру, вот рабочий пример, если кому-то это нужно: codepen.io/anon/pen/zGBpNq
bwitkowicz

Это решение смещает модальное окно вправо на 2 пикселя, причина: перед элементом. Но это можно решить, добавив такой же код для: после
Cypher

146

1. Как вы можете расположить модально вертикально в центре, если вы не знаете точную высоту модала?

Для абсолютного центрирования Bootstrap 3 Modal без объявления высоты, вам сначала нужно перезаписать Bootstrap CSS, добавив это в свою таблицу стилей:

.modal-dialog-center { /* Edited classname 10/03/2014 */
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
}

Это поместит модальный диалог в верхнем левом углу в центре окна.

Мы должны добавить этот медиа-запрос, иначе модальное поле left не верно на небольших устройствах:

@media (max-width: 767px) {
  .modal-dialog-center { /* Edited classname 10/03/2014 */
    width: 100%;
  }
} 

Теперь нам нужно настроить его положение с помощью JavaScript. Для этого мы даем элементу отрицательное верхнее и левое поле, равное половине его высоты и ширины. В этом примере мы будем использовать jQuery, поскольку он доступен с Bootstrap.

$('.modal').on('shown.bs.modal', function() {
    $(this).find('.modal-dialog').css({
        'margin-top': function () {
            return -($(this).outerHeight() / 2);
        },
        'margin-left': function () {
            return -($(this).outerWidth() / 2);
        }
    });
});

Обновление (01.10.2015):

Добавление на ответ Финика . Кредиты на Центрирование в Неизвестном .

.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px; /* Adjusts for spacing */
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

Обратите внимание на отрицательную маржу, верно? Это удаляет пространство, добавленное встроенным блоком. Это пространство заставляет модал перейти к нижней части страницы @media width <768px.

2. Можно ли центрировать модал и иметь переполнение: auto в модальном теле, но только если модал превышает высоту экрана?

Это возможно, давая модальному телу overflow-y: auto и max-height. Требуется немного больше работы, чтобы заставить это работать должным образом. Начните с добавления этого в свою таблицу стилей:

.modal-body {
    overflow-y: auto;
}
.modal-footer {
    margin-top: 0;
}

Мы снова будем использовать jQuery, чтобы получить высоту окна и сначала установить максимальную высоту модального содержимого. Затем мы должны установить максимальную высоту модального тела, вычитая модальное содержимое с помощью modal-header и modal-footer:

$('.modal').on('shown.bs.modal', function() {
    var contentHeight = $(window).height() - 60;
    var headerHeight = $(this).find('.modal-header').outerHeight() || 2;
    var footerHeight = $(this).find('.modal-footer').outerHeight() || 2;

    $(this).find('.modal-content').css({
        'max-height': function () {
            return contentHeight;
        }
    });

    $(this).find('.modal-body').css({
        'max-height': function () {
            return (contentHeight - (headerHeight + footerHeight));
        }
    });

    $(this).find('.modal-dialog').css({
        'margin-top': function () {
            return -($(this).outerHeight() / 2);
        },
        'margin-left': function () {
            return -($(this).outerWidth() / 2);
        }
    });
});

Вы можете найти рабочую демонстрацию здесь с Bootstrap 3.0.3: http://cdpn.io/GwvrJ РЕДАКТИРОВАТЬ: я рекомендую использовать обновленную версию вместо этого для более гибкого решения: http://cdpn.io/mKfCc

Обновление (30/11/2015):

function setModalMaxHeight(element) {
  this.$element     = $(element);  
  this.$content     = this.$element.find('.modal-content');
  var borderWidth   = this.$content.outerHeight() - this.$content.innerHeight();
  var dialogMargin  = $(window).width() < 768 ? 20 : 60;
  var contentHeight = $(window).height() - (dialogMargin + borderWidth);
  var headerHeight  = this.$element.find('.modal-header').outerHeight() || 0;
  var footerHeight  = this.$element.find('.modal-footer').outerHeight() || 0;
  var maxHeight     = contentHeight - (headerHeight + footerHeight);

  this.$content.css({
      'overflow': 'hidden'
  });

  this.$element
    .find('.modal-body').css({
      'max-height': maxHeight,
      'overflow-y': 'auto'
  });
}

$('.modal').on('show.bs.modal', function() {
  $(this).show();
  setModalMaxHeight(this);
});

$(window).resize(function() {
  if ($('.modal.in').length != 0) {
    setModalMaxHeight($('.modal.in'));
  }
});

(Обновлено 30/11/2015 http://cdpn.io/mKfCc с вышеуказанным редактированием)


1
отличный ответ и пост! Тем не менее, это также может быть анимированным? Он прекрасно работает, когда он просто появляется, но как насчет анимации? Я на работе и не могу проверить это, но я хочу увидеть результаты
скутер

Вы можете добавить класс исчезновения на модал. Проверьте мое обновленное решение на cdpn.io/mKfCc
dimbslmh

Хотя кажется, что он отлично работает на codepen, я не могу заставить его работать над моим проектом. Я думаю, вам просто нужно добавить код, а не заменить что-то правильно?
скутер

1
Привет снова! Заметил следующее. Когда открывается первый модальный, правое поле неверно, пока вы не измените размер один раз. Любые иды на этот?
скутер

1
@bernie Я сделал скриншоты на Browserstack с помощью форка моего кода, у которого есть краткая модальная версия для document.ready: browserstack.com/screenshots/… Browserstack не поддерживает v9.3.x для скриншотов (пока), но я думаю, нечто похожее на то, что вы описали, происходит на iOS 6.0 (см. скриншот iPad 3rd (6.0) (Portrait)). Возможно, это старая ошибка, которая вернулась в v9.3.2. Если вы хотите, вы можете подать отчет об ошибке на forums.developer.apple.com/community/safari-and-web/…
dimbslmh

37

Мое решение

.modal-dialog-center {
    margin-top: 25%;
}

    <div id="waitForm" class="modal">
        <div class="modal-dialog modal-dialog-center">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 id="headerBlock" class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <span id="bodyBlock"></span>
                    <br/>
                    <p style="text-align: center">
                        <img src="@Url.Content("~/Content/images/progress-loader.gif")" alt="progress"/>
                    </p>   
                </div>
            </div>
        </div>
    </div>

Вам следует использовать padding-top. маржа
прервет

2
Максимальный размер поля для 25% требует, чтобы модал был 50% ростом.
восстание

28

Это можно просто исправить display: flex

.modal-dialog {
  margin-top: 0;
  margin-bottom: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.modal.fade .modal-dialog {
  transform: translate(0, -100%);
}

.modal.in .modal-dialog {
  transform: translate(0, 0);
}

С префиксом

.modal-dialog {
  margin-top: 0;
  margin-bottom: 0;
  height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -100%);
          transform: translate(0, -100%);
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

2
Это предотвращает нажатие на фон из-за высоты 100vh. Это хорошо для настроек "фон:" статические ".
ianstigator

эта проблема исчезла, проблема анимации
Вишванат Лекшманан,

23

Я пришел с чистым решением CSS! Это css3, что означает, что ie8 или ниже не поддерживается, но кроме этого он протестирован и работает на ios, android, ie9 +, chrome, firefox, десктоп-сафари.

Я использую следующие CSS:

.modal-dialog {
  position:absolute;
  top:50% !important;
  transform: translate(0, -50%) !important;
  -ms-transform: translate(0, -50%) !important;
  -webkit-transform: translate(0, -50%) !important;
  margin:auto 5%;
  width:90%;
  height:80%;
}
.modal-content {
  min-height:100%;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0; 
}
.modal-body {
  position:absolute;
  top:45px; /** height of header **/
  bottom:45px;  /** height of footer **/
  left:0;
  right:0;
  overflow-y:auto;
}
.modal-footer {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}

Вот скрипка. http://codepen.io/anon/pen/Hiskj

... выбрав это как правильный ответ, так как нет более тяжелого javascript, который ставит браузер на колени в случае более чем одного модального режима.


8
Весь смысл использования JavaScript состоял в том, чтобы получить неизвестную высоту модального поля. Ваше решение имеет фиксированную высоту 80%, что не отвечает на ваш собственный вопрос: «Как вы можете расположить модально вертикально в центре, если вы не знаете точную высоту модала
dimbslmh

... размер высоты установлен так, чтобы ограничивать максимальную модальную высоту по сравнению с высотой экрана. Однако процент перевода устанавливается в соответствии с высотой CONTENT.
Scooterlord

3
Если вы хотите получить решение, которое не меняет размер модального окна, попробуйте следующее решение css: tweaks.klickagent.ch/#30.05.2014_TwitterBootstrapCenterModal
klickagent.ch

Очень хорошо, как хорошо. Однако у него другой подход, чем тот, который я описываю. В вашем случае весь модал перемещается вверх и вниз, когда в моем случае создается переполненный элемент. Очень хорошо, хотя! Мне это нравится!
Scooterlord

Это требует, чтобы высота была установлена ​​.. Что не совсем то, что просит пользователь.
восстание

21

Если вы в порядке с использованием flexbox, это должно помочь решить эту проблему.

.modal-dialog {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}

.modal-content {
  margin: 0 auto;
}

7
Я обнаружил, что этот ответ отлично работает для меня. Тем не менее, если вы хотите , чтобы пользователи могли закрыть модальный, нажав это фон, не забудьте добавить pointer-events: noneв .modal-dialogи pointer-events: autoк .modal-content. Becausu .modal-dialog {height: 100%}охватывает весь столбец выше и ниже модальной зоны и запрещает пользователям нажимать на фон в этой области.
wuct

в сочетании с предложением @ChingTingWu, самый эффективный
Strider

А где предложение @ChingTingWu?
giovannipds

1
Кажется, что ChingTingWu изменился на @wuct
xiaolin

1
@giovannipds Ой, я переименовал свое имя пользователя, потому что оно короче и его легче пометить. Извините за путаницу :)
wuct

20

Мое решение:

.modal.in .modal-dialog 
{
    -webkit-transform: translate(0, calc(50vh - 50%));
    -ms-transform: translate(0, 50vh) translate(0, -50%);
    -o-transform: translate(0, calc(50vh - 50%));
    transform: translate(0, 50vh) translate(0, -50%);
}

Кажется, это отлично работает с Bootstrap 3. Почему это не принятый ответ? Это намного проще (4 директивы CSS), чем другие.
danielricecodes

@danielricecodes Я собираюсь сделать снимок и предположить, что это из-за проблем с единицами просмотра. , Предложенный ответ scooterlord предложил совместимость даже с IE9 и iOs, которые, как мне кажется, вызывают беспокойство. Если вы проверите страницу проблем canIuse, вы увидите, что есть проблемы с iOs и IE10 и старше. Не то, чтобы я был согласен или нет, что это правильный ответ. Я просто указываю, почему, возможно, это не было выбрано в качестве ответа.
Малавос

1
Есть проблема с этим подходом, когда модальное содержимое имеет прокручиваемый контент (больше контента, чем умещается в окне)
Стивен Прибилинский

Это должен быть принятый ответ. Пока это единственное решение работает для меня. Спасибо за это.
шифу

Это не будет работать, если ваш модальный контент больше, чем высота экрана (если ваш модальный должен прокручивать)
Бретт Грегсон

18

Все, что я сделал в моем случае, это установил Top в моем css, зная высоту модального

<div id="myModal" class="modal fade"> ... </div>

в моем CSS я установил

#myModal{
    height: 400px;
    top: calc(50% - 200px) !important;
}

1
Как новичок в css, этот ответ казался наименее пугающим и выполнил задание
Одед Бен Дов

2
Это не отвечает на первую часть вопроса: "... когда вы не знаете точную высоту модала?"
natec

15

Добавление этого простого CSS также работает.

.modal-dialog {
  height: 100vh !important;
  display: flex;
}

.modal-content {
  margin: auto !important;
  height: fit-content !important;
}

Что такое фит-контент?
Марк Руссель

12

Есть самый простой способ сделать это, используя css:

.modal-dialog {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width:500px;
    height:300px;
}

Вот и все. Обратите внимание, что его нужно применять только к .modal-dialogконтейнеру div.

Демо: https://jsfiddle.net/darioferrer/0ueu4dmy/


7
Не реагирует на мобильные устройства из-за фиксированной ширины и высоты.
ianstigator

Ваш ответ предполагает, что все устройства имеют одинаковое разрешение экрана
Патрисио Росси

Нет человека Я полагаю, вы поняли этот пример и способны адаптировать его к каждому случаю.
Дарио Феррер

В Bootstrap v3.3.0 запуск прошел успешно, спасибо
Амин Гадери

11

В дополнение к отличному ответу @ Finik, это исправление применяется только к немобильным устройствам. Я тестировал в IE8, Chrome и Firefox 22 - он работает с очень длинным или коротким контентом.

.modal {
  text-align: center;
}
@media screen and (min-device-width: 768px) {
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

8

Самое универсальное решение, которое я написал. Динамически вычисляется с высотой диалога. (Следующим шагом может быть пересчет высоты диалогов при изменении размера окна.)

JSfiddle: http://jsfiddle.net/8Fvg9/3/

// initialise on document ready
jQuery(document).ready(function ($) {
    'use strict';

    // CENTERED MODALS
    // phase one - store every dialog's height
    $('.modal').each(function () {
        var t = $(this),
            d = t.find('.modal-dialog'),
            fadeClass = (t.is('.fade') ? 'fade' : '');
        // render dialog
        t.removeClass('fade')
            .addClass('invisible')
            .css('display', 'block');
        // read and store dialog height
        d.data('height', d.height());
        // hide dialog again
        t.css('display', '')
            .removeClass('invisible')
            .addClass(fadeClass);
    });
    // phase two - set margin-top on every dialog show
    $('.modal').on('show.bs.modal', function () {
        var t = $(this),
            d = t.find('.modal-dialog'),
            dh = d.data('height'),
            w = $(window).width(),
            h = $(window).height();
        // if it is desktop & dialog is lower than viewport
        // (set your own values)
        if (w > 380 && (dh + 60) < h) {
            d.css('margin-top', Math.round(0.96 * (h - dh) / 2));
        } else {
            d.css('margin-top', '');
        }
    });

});

7

Найдено идеальное решение здесь

$(function() {
    function reposition() {
        var modal = $(this),
            dialog = modal.find('.modal-dialog');
        modal.css('display', 'block');

        // Dividing by two centers the modal exactly, but dividing by three 
        // or four works better for larger screens.
        dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
    }
    // Reposition when a modal is shown
    $('.modal').on('show.bs.modal', reposition);
    // Reposition when the window is resized
    $(window).on('resize', function() {
        $('.modal:visible').each(reposition);
    });
});

1
Спасибо. Идеально для меня с одним изменением: dialog.css ("margin-top", Math.max (0, ($ (document) .scrollTop () + (($ (window) .height () - dialog.height ()) / 2))));
Вячеслав Солдатов

4
$('#myModal').on('shown.bs.modal', function() {
    var initModalHeight = $('#modal-dialog').outerHeight(); //give an id to .mobile-dialog
    var userScreenHeight = $(document).outerHeight();
    if (initModalHeight > userScreenHeight) {
        $('#modal-dialog').css('overflow', 'auto'); //set to overflow if no fit
    } else {
        $('#modal-dialog').css('margin-top', 
        (userScreenHeight / 2) - (initModalHeight/2)); //center it if it does fit
    }
});

С парой настроек селекторов это сработало как шарм. @$modal = $('.fade.in'); modalBox = @$modal.find('.modal-content'); initModalHeight = modalBox.outerHeight(); userScreenHeight = @$modal.outerHeight()
Juliangonzalez

4

Вот еще один метод css only, который работает довольно хорошо и основан на этом: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

дерзость:

.modal {
    height: 100%;

    .modal-dialog {
        top: 50% !important;
        margin-top:0;
        margin-bottom:0;
    }

    //keep proper transitions on fade in
    &.fade .modal-dialog {
        transform: translateY(-100%) !important;
    }
    &.in .modal-dialog {
        transform: translateY(-50%) !important;
    }
}

Как и в случае других transformрешений, проблема возникает, когда модальное содержимое имеет прокручиваемый контент (больше контента, чем помещается в окне)
Стивен Прибилинский

3

я загрузил bootstrap3-dialog по ссылке ниже и изменил функцию открытия в bootstrap-dialog.js

https://github.com/nakupanda/bootstrap3-dialog

Код

open: function () {
            !this.isRealized() && this.realize();
            this.updateClosable();
            //Custom To Vertically centering Bootstrap 
            var $mymodal = this.getModal();
            $mymodal = $mymodal.append('<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td align="center" valign="middle" class="centerModal"></td></tr></table>');
            $mymodal = $mymodal.find(".modal-dialog").appendTo($mymodal.find(".centerModal"));
            //END
            this.getModal().modal('show');
            return this;
        }

Css

.centerModal .modal-header{
    text-align:left;
}
.centerModal .modal-body{
    text-align:left;
} 

Вот модификация, которая может быть применена в вашем собственном коде, без необходимости изменения исходного источника BSDialog: gist.github.com/mahemoff/8ff6d3782d2da6f9cbb3 (только некоторые модификации JS, также они написаны на Coffee, но вы поймете, что идея).
mahemoff

3

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

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

2

Попробуйте что-то вроде этого:

.popup__overlay {
    position: fixed;
    left:  0;
    top:  0;
    width: 100%;
    height: 100%;
    z-index: 999;
    text-align: center
    }
.popup {
    display: inline-block;
    vertical-align: middle
    } 

1
Это могло бы работать довольно хорошо, но у модалей бутстрапа есть абсолюты, внутри фиксированные, внутри того и
другого

1
Как эти классы связаны с модальностями Bootstrap / Bootstrap?
Лофихельсинки

1

Возможно, вы захотите проверить этот набор методов для абсолютного центрирования div: http://codepen.io/shshaw/full/gEiDt


1
Хм, в пояснениях говорится, что вы должны объявить рост, а это не то, что я ищу
скутер

1

Простой способ Работа для меня Спасибо rensdenobel :) http://jsfiddle.net/rensdenobel/sRmLV/13/

<style>
.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
}
.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;
}
</style>
<!-- Button trigger modal -->
<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>    

1

еще одно решение, которое установит правильную позицию для каждого видимого модального window.resizeсобытия и события show.bs.modal:

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

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

1

Я знаю, что уже немного поздно, но я добавляю новый ответ, чтобы он не терялся в толпе. Это решение для кросс-десктопного мобильного браузера, которое работает везде, как и должно.

Это просто нужно modal-dialogобернуть внутри modal-dialog-wrapкласса и иметь следующие дополнения кода:

.modal-dialog-wrap {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
}

.modal-dialog {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.modal-content {
  display: inline-block;
  text-align: left;
}

Диалог начинается по центру, а в случае большого содержимого он просто увеличивается вертикально, пока не появится полоса прокрутки.

Вот рабочая скрипка для вашего удовольствия!

https://jsfiddle.net/v6u82mvu/1/


1

Это довольно старое решение, и оно требует решения с использованием Bootstrap 3, но для тех, кто интересуется: начиная с Bootstrap 4 и далее существует встроенное решение под названием .modal-dialog-centered. Вот проблема: https://github.com/twbs/bootstrap/issues/23638

Так что, используя v4, вам просто нужно добавить .modal-dialog-centeredк .modal-dialogцентру по вертикали:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

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

0

Подумайте об использовании загрузочного подключаемого модуля начальной загрузки - https://github.com/jschr/bootstrap-modal

Плагин будет центрировать все ваши модалы


... к сожалению, я пробовал это, но не мог заставить его работать должным образом - по крайней мере, с моим кодом. Я думаю, что каждый должен настроить это под свои нужды! Спасибо за ответ, хотя.
скутер

0

Для центрирования я не понимаю, что происходит с чрезмерно сложными решениями. bootstrap уже центрирует его по горизонтали для вас, так что вам не нужно возиться с этим. Мое решение - установить верхнее поле только с помощью jQuery.

$('#myModal').on('loaded.bs.modal', function() {
    $(this).find('.modal-dialog').css({
        'margin-top': function () {
            return (($(window).outerHeight() / 2) - ($(this).outerHeight() / 2));
        }
    });
});

Я использовал событиеloaded.bs.modal, так как я удаленно загружаю контент, а использование свойства selected.ba.modal приводит к неверному вычислению высоты. Конечно, вы можете добавить событие для изменяемого размера окна, если вам нужно, чтобы оно было таким отзывчивым.


если модальный
размер

0

Очень простой способ реализовать эту концепцию, и вы всегда будете получать модальные моды в своем экране с помощью css как fllow: http://jsfiddle.net/jy0zc2jc/1/

Вы должны просто modalотобразить класс в виде таблицы следующим образом:

display:table

и modal-dialogкакdisplay:table-cell

см. полный рабочий пример в данной скрипке


Я вообще не вижу
модал

Единственное, что я вижу (в Google Chrome), это значок красного креста и фон
ThaDafinser

Не скроллабель, когда у модала больше контента, чем умещается в окне
Стивен Прибилинский

0

это не так сложно.

пожалуйста попробуйте это:

$(document).ready(function(){
    var modalId = "#myModal";
    resize: function(){
            var new_margin = Math.ceil(($(window).height() - $(modalId).find('.modal-dialog').height()) / 2);
            $(modalId).find('.modal-dialog').css('margin-top', new_margin + 'px');
    }
    $(window).resize(function(){
        resize();
    });
    $(modalId).on('shown.bs.modal', function(){
        resize();
    });
});

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

В мобильном Plantform это может выглядеть немного иначе, вот мой код.

<div class="modal-container">
  <style>
  .modal-dialog{
    margin-top: 60%;
    width:80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 100%
  }
  @media screen and (orientation:landscape){
    .modal-dialog{
      margin-top: 70;
      width:80%;
      margin-left: 10%;
      margin-right: 10%;
      margin-bottom: 100%
    }
  }
  .modal-body{
    text-align: center;
  }
  .modal-body p{
    margin:14px 0px;
    font-size: 110%;
  }
  .modal-content{
    border-radius: 10px;
  }
  .modal-footer{
    padding:0px;
  }
  .modal-footer a{
    padding: 15px;
  }
  .modal-footer a:nth-child(1){
    border-radius: 0px 0px 0px 10px;
  }
  .modal-footer a:nth-child(2){
    border-radius: 0px 0px 10px 0px;
  }
  </style>
  <h2>Basic Modal Example</h2>
  <div data-toggle="modal" data-target="#myModal">Div for modal</div>
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            <p>确定要取消本次订单嘛?</p>
          </div>
          <div class="modal-footer">
            <div class="btn-group btn-group-justified">
              <a href="#" class="btn btn-default" data-dismiss="modal">取消</a>
              <a href="#" class="btn btn-default" data-dismiss="modal">确定</a>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.