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

Question

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

245

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

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

Я попытался использовать это:

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

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

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

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

scooterlord 24 авг. 2013, в 19:00

Источник

1

@Heiken почему-то заставляет меня прыгать вниз по экрану, я использую хром
Sven van den Boogaart 03 янв. 2015, в 17:34

Теги:

twitter-bootstrap

modal-dialog

css

center

34 ответа

372

.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-класс, чтобы убедиться, что он отображается вне верхней границы окна, а не center

Finik 06 авг. 2014, в 12:44

0

Я на самом деле переопределил это по ошибке, спасибо, что указал на то, что это действительно работает за кулисами.
Dorian 13 нояб. 2014, в 17:36
0

Это, вероятно, лучший способ центрировать по вертикали не только модальный бутстрап, но и все остальное. css-tricks.com/centering-in-the-unknown
Mark S 20 янв. 2015, в 02:05
3

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

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

Не работает для видео.
atilkan 25 июнь 2015, в 16:33
0

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

Отлично работает. Но не могли бы вы подробнее рассказать о том, почему этот параметр работает, так как я новичок в CSS и верстке. Особенно для чего нужен display: inline-block
macemers 26 апр. 2016, в 03:43
0

Такой модальный режим скрывается замиранием (по умолчанию), но непосредственно перед замиранием он отскакивает от центра к левой стороне и только затем исчезает. Довольно уродливые...
Jānis Elmeris 17 окт. 2017, в 19:36
0

@bwitkowicz спасибо, что поделились
FindOutIslamNow 09 май 2018, в 12:49

Показать ещё 7 комментариев

137

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

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

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

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

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

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

Забастовкa >

Обновление (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;
}

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

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

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

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

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

$('.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 EDIT: я рекомендую использовать обновленную версию вместо более гибкого решения: 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 с надписью)

dimbslmh 24 янв. 2014, в 04:19

1

отличный ответ и пост! Тем не менее, это также может быть анимированным? Он прекрасно работает, когда он просто появляется, но как насчет анимации? Я на работе и не могу проверить это, но мне не терпится увидеть результаты
scooterlord 24 янв. 2014, в 07:18
0

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

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

Я протестировал ваш код в стоковой теме и, кажется, работает нормально (хотя он и портит код в моем текущем проекте, я должен его отладить), однако изменение размера экрана с помощью открытого модального режима вызывает проблемы (даже в приведенном выше фрагменте кода) , Как только вы исправите это, я дам этот ответ как положительный! Прекрасная работа! :)
scooterlord 24 янв. 2014, в 22:16
0

Я обновил JavaScript для работы с открытым модалом. И да, вы должны добавить CSS в таблицу стилей, отличную от начальной загрузки. В противном случае вы потеряете настройки при обновлении начальной загрузки.
dimbslmh 25 янв. 2014, в 10:41
0

Еще раз спасибо за ваши усилия, но это все еще не работает должным образом. Хотя изменение размера работает с открытым модалом, после изменения размера, закрытия и повторного открытия он использует исходное положение в качестве вертикального центра. : /
scooterlord 25 янв. 2014, в 10:58
0

Ах, это должно работать сейчас. Проверка модального «в» состоянии вместо body.modal-open
dimbslmh 25 янв. 2014, в 12:11
0

Ну, я думаю, ты это заслужил! :)
scooterlord 25 янв. 2014, в 12:50
1

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

мой плохой, я использовал переполнение: скрытый на .modal, и разница была в ширине полосы прокрутки.
scooterlord 31 янв. 2014, в 13:59
0

К сожалению, это не работает, если вы сделаете экран маленьким, а затем прокрутите окно. Снимок экрана: take.ms/4m69x
Jon Stevens 09 март 2014, в 05:26
0

Спасибо, что указал на это, Джон. Это происходит, когда максимальная высота .modal-body получает отрицательное значение, которое недопустимо. Скорее всего, это произойдет на мобильных устройствах с очень низким разрешением. Было бы лучше предотвратить запуск сценария на этих устройствах. Я сделал это, проверив начальную высоту окна. Обновил мой ответ соответственно.
dimbslmh 09 март 2014, в 20:28
0

@ambrus Можете ли вы воспроизвести это в codepen / jsfiddle? Я попытался добавить img.img-отзывчивый в нескольких модальных моделях, но я не могу воспроизвести эту ошибку. Возможно, вы можете попробовать это снова без моего сценария. Если это все еще происходит, вы должны сообщить об этом в Bootstrap.
dimbslmh 11 март 2014, в 09:39
0

Возможно, вы захотите добавить overflow:hidden чтобы удалить раздражающую полосу прокрутки!
Ilia Rostovtsev 20 июль 2014, в 20:24
0

Я использую вышеупомянутое решение, есть ли способ, что модальное всегда на 100% высоты, и если содержание превышает, модальное тело должно прокручиваться, как указано выше.
django 12 авг. 2014, в 13:58
0

У меня проблемы с настройкой работы с удаленными модалами. Кажется, что центрирование происходит до того, как контент загружен в модал. После того, как контент загружен, верхние числа крайних позиций заканчиваются. Какие-нибудь решения для этого?
LBF 22 авг. 2014, в 02:13
0

Не работает должным образом на Safari на iPad. Модальные окна расположены вертикально по центру относительно всей страницы, а не только области отображения.
bernie 30 сен. 2016, в 18:58
0

@bernie, можете ли вы сказать мне, на каком поколении Ipad, iOS и Safari вы тестировали это? Похоже, что решение CSS не работает на этом конкретном устройстве.
dimbslmh 01 окт. 2016, в 22:15
0

@dimbslmh Это iPad mini iOS 9.3.2. Не знаю, как получить версию Mozilla/5.0 (iPad; CPU OS 9_3_2 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13F69 Safari/601.1 , но пользовательским агентом является Mozilla/5.0 (iPad; CPU OS 9_3_2 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13F69 Safari/601.1
bernie 02 окт. 2016, в 16:06
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 03 окт. 2016, в 02:19
0

@dimbslmh Спасибо за продолжение! Я открыл сообщение об ошибке здесь: forums.developer.apple.com/message/185166 .
bernie 03 окт. 2016, в 15:12

Показать ещё 19 комментариев

35

Мое решение

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

Brian J. Hakim 09 окт. 2013, в 14:57

0

Вам следует использовать padding-top. поле будет нарушать действие закрытия при нажатии на оверлей
anvd 04 июнь 2015, в 00:22
1

Максимальный размер поля для 25% требует, чтобы модал имел высоту 50%.
rebellion 14 авг. 2015, в 12:00

24

Его можно просто зафиксировать с помощью 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);
}

Mo. 16 дек. 2015, в 10:37

1

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

эта причина исчезает проблема с анимацией
Viswanath Lekshmanan 05 апр. 2017, в 07:25

18

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

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

.modal-content {
  margin: 0 auto;
}

xiaolin 02 янв. 2015, в 08:04

6

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

в сочетании с предложением @ChingTingWu, наиболее эффективным
bitstrider 24 нояб. 2015, в 23:26
0

И где же предложение @ChingTingWu?
giovannipds 30 авг. 2016, в 17:03
1

ChingTingWu, кажется, изменился на @wuct
xiaolin 30 авг. 2016, в 19:14
1

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

@wuct, нет проблем, я думаю, что это просто проблема сайта, он должен быть в состоянии найти / найти и заменить ссылки.
giovannipds 27 окт. 2016, в 08:53
0

Верх содержимого обрезается, когда модальное содержимое имеет прокручиваемый контент (больше содержимого, чем помещается в окне)
Steven Pribilinskiy 27 июль 2018, в 09:46

Показать ещё 5 комментариев

16

Мое решение:

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

Vadim 16 авг. 2017, в 09:01

0

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

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

Лучший ответ до сих пор, и я попробовал несколько здесь .... Спасибо
Sultanos 01 июнь 2018, в 14:26
0

Есть проблема с этим подходом, когда модальное содержимое имеет прокручиваемый контент (больше контента, чем помещается в окне)
Steven Pribilinskiy 27 июль 2018, в 09:32
0

Это должен быть принятый ответ. Пока это единственное решение работает для меня. Спасибо за это.
shifu 05 сен. 2018, в 06:29

Показать ещё 3 комментария

15

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

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

в моем css я set

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

Moes 30 окт. 2013, в 06:42

1

Как новичок в CSS, этот ответ казался наименее пугающим и выполнил свою работу
Oded Ben Dov 21 авг. 2014, в 13:17
1

Это не отвечает на первую часть вопроса: "... когда вы не знаете точную высоту модала?"
Ture Flase 15 июль 2016, в 10:44

12

Расширение на @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;
}

roo2 03 июнь 2015, в 01:32

11

Самый простой способ сделать это с помощью css:

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

Что это. Обратите внимание, что это необходимо только для использования в контейнере .modal-dialog.

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

Dario Ferrer 11 апр. 2016, в 06:36

6

Не реагирует на мобильные устройства из-за фиксированной ширины и высоты.
ianstigator 17 окт. 2016, в 23:19
0

Ваш ответ предполагает, что каждое устройство имеет одинаковое разрешение экрана
Patricio Rossi 28 июнь 2017, в 18:58
0

Нет человека Полагаю, вы поняли этот пример и способны адаптировать его к каждому случаю.
Dario Ferrer 05 июль 2017, в 02:48
0

В Bootstrap v3.3.0 запуск прошел успешно, спасибо
Amin Ghaderi 24 окт. 2018, в 22:30

Показать ещё 2 комментария

8

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

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

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

    // CENTERED MODALS
    // phase one - store every dialog 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', '');
        }
    });

});

Jan Renner 03 июнь 2014, в 15:55

6

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

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

Ismail Farooq 04 авг. 2016, в 14:28

1

Спасибо. Идеально для меня с одним изменением: dialog.css ("margin-top", Math.max (0, ($ (document) .scrollTop () + (($ (window) .height () - dialog.height ()) / 2))));
Viacheslav Soldatov 24 май 2018, в 00:14

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

Ray Suelzer 11 окт. 2013, в 08:07

0

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

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

Liam 30 май 2017, в 09:56

3

Здесь еще один метод css, который работает очень хорошо и основан на этом: 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;
    }
}

phazei 26 май 2016, в 03:23

0

Как и в других решениях transform проблема возникает, когда модальное содержимое имеет прокручиваемый контент (больше содержимого, чем помещается в окне).
Steven Pribilinskiy 27 июль 2018, в 09:39

3

я загрузил bootstrap3-dialog из следующей ссылки и изменил функцию open в 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;
}

user3085452 10 дек. 2013, в 06:07

0

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

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
    }

Sergey Briskin 24 авг. 2013, в 20:31

1

Это могло бы работать довольно хорошо, но у модалей бутстрапа есть абсолюты, внутри фиксированные, внутри того и другого ...: /
scooterlord 24 авг. 2013, в 19:46
1

Как эти классы связаны с модальностями Bootstrap / Bootstrap?
lofihelsinki 17 май 2018, в 06:51

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/

scooterlord 04 дек. 2016, в 00:22

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

user3477026 14 авг. 2016, в 22:48

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

lenybernard 04 май 2016, в 14:00

1

Простой способ. Работайте со мной. Thens 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>

Tuyen Cao 09 март 2016, в 18:00

1

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

Sevron 24 авг. 2013, в 20:07

1

Хм, в пояснениях говорится, что вы должны объявить рост, а это не то, что я ищу
scooterlord 24 авг. 2013, в 19:37

0

CSS:

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

HTML:

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

Ссылка: http://jsfiddle.net/rensdenobel/sRmLV/13/

Ejrr1085 29 янв. 2019, в 01:02

0

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

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

.modal:before {
  content: '';
  display: inline-block;
  height: 20%;
  vertical-align: middle;
  margin-right: -4px;
}

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

Sumit Kumar Gupta 16 янв. 2019, в 16:22

0

Самое простое решение - добавить модальные стили диалога вверху страницы или импортировать css с этим кодом:

<style>
    .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 50%;
    width:40%;
    height:40%;
    }
</style>

Модальное объявление:

    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">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>

Модальное использование:

<a data-toggle="modal" data-target="#exampleModalCenter">
 ...
</a>

Jackkobec 12 янв. 2019, в 23:22

0

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

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

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

Tobold 11 янв. 2019, в 14:03

0

установить модальный центр на экран

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

Super Model 19 нояб. 2018, в 13:19

0

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

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

Martian2049 06 июль 2016, в 02:03

0

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

Если вы хотите, вы можете установить собственный класс (ex:.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;
}

Rakesh Vadnal 11 апр. 2016, в 11:43

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

Mr. Sun Lin 27 фев. 2015, в 06:16

0

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

вам нужно просто modal отобразить класс как таблицу, следуя css:

display:table

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

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

Innodel 22 дек. 2014, в 06:13

0

Я вообще не вижу модал
ThaDafinser 01 июнь 2015, в 07:03
0

Единственное, что я вижу (в Google Chrome), это значок красного креста и фон
ThaDafinser 08 июнь 2015, в 06:35
0

Как насчет нажатия на иконку ... попробуйте, волшебство случится :)
user2432772 17 июль 2015, в 20:53
0

Не прокручивать, когда модальное содержимое имеет больше, чем помещается в окне
Steven Pribilinskiy 27 июль 2018, в 09:47

Показать ещё 2 комментария

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, поскольку я удаленно загружаю контент, и использование события показанное .ba.modal приводит к неправильному вычислению высоты. Вы можете, конечно, добавить событие для изменения размера окна, если вам нужно, чтобы он был отзывчивым.

Scott Flack 26 сен. 2014, в 05:30

0

если модальный достаточно большой, это может вызвать проблемы
scooterlord 26 сен. 2014, в 11:43

0

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

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

Jeremy Lynch 03 фев. 2014, в 14:34

0

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

-1

Стиль таблицы

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <table height="100%" width="100%">
        <tr><td valign="middle">
            <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</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>      
        </td></tr>
    </table>
</div>

KhUmBaL 23 янв. 2014, в 21:06

Ещё вопросы

@Heiken почему-то заставляет меня прыгать вниз по экрану, я использую хром
Я на самом деле переопределил это по ошибке, спасибо, что указал на то, что это действительно работает за кулисами.
Это, вероятно, лучший способ центрировать по вертикали не только модальный бутстрап, но и все остальное. css-tricks.com/centering-in-the-unknown
Я уточняю, что это не очень хорошо работает на мобильном телефоне. Потому что определение «: после» имеет высоту 100% и может автоматически перемещать модал вниз страницы. Я только что решил объявить .modal {display: flex! Важно;} .modal-dialog {margin: auto}. 92,97% людей уже поддерживают использование этого свойства CSS, однако для генерального суппорта можно использовать JavaScript для установки полей.
Абсолютно здорово, но я бы рекомендовал использовать его только выше 768 пикселей и оставить настройку по умолчанию на мобильном телефоне. Верхняя позиция лучше всего подходит для модалов, когда высота экрана мала. Я также настроил анимацию, чтобы она отображалась из центра, вот рабочий пример, если кому-то это нужно: codepen.io/anon/pen/zGBpNq
Это решение смещает модальное окно вправо на 2 пикселя, причина: перед элементом. Но это можно решить, добавив такой же код для: после
Отлично работает. Но не могли бы вы подробнее рассказать о том, почему этот параметр работает, так как я новичок в CSS и верстке. Особенно для чего нужен display: inline-block
Такой модальный режим скрывается замиранием (по умолчанию), но непосредственно перед замиранием он отскакивает от центра к левой стороне и только затем исчезает. Довольно уродливые...
отличный ответ и пост! Тем не менее, это также может быть анимированным? Он прекрасно работает, когда он просто появляется, но как насчет анимации? Я на работе и не могу проверить это, но мне не терпится увидеть результаты
Вы можете добавить класс исчезновения на модал. Проверьте мое обновленное решение на cdpn.io/mKfCc
Хотя кажется, что он отлично работает на codepen, я не могу заставить его работать над моим проектом. Я думаю, вам просто нужно добавить код, а не заменить что-то правильно?
Я протестировал ваш код в стоковой теме и, кажется, работает нормально (хотя он и портит код в моем текущем проекте, я должен его отладить), однако изменение размера экрана с помощью открытого модального режима вызывает проблемы (даже в приведенном выше фрагменте кода) , Как только вы исправите это, я дам этот ответ как положительный! Прекрасная работа! :)
Я обновил JavaScript для работы с открытым модалом. И да, вы должны добавить CSS в таблицу стилей, отличную от начальной загрузки. В противном случае вы потеряете настройки при обновлении начальной загрузки.
Еще раз спасибо за ваши усилия, но это все еще не работает должным образом. Хотя изменение размера работает с открытым модалом, после изменения размера, закрытия и повторного открытия он использует исходное положение в качестве вертикального центра. : /
Ах, это должно работать сейчас. Проверка модального «в» состоянии вместо body.modal-open
Привет снова! Заметил следующее. Когда первый модальный первый раз открывается, правое поле неверно, пока вы не измените размер один раз. Любые иды на этот?
мой плохой, я использовал переполнение: скрытый на .modal, и разница была в ширине полосы прокрутки.
К сожалению, это не работает, если вы сделаете экран маленьким, а затем прокрутите окно. Снимок экрана: take.ms/4m69x
Спасибо, что указал на это, Джон. Это происходит, когда максимальная высота .modal-body получает отрицательное значение, которое недопустимо. Скорее всего, это произойдет на мобильных устройствах с очень низким разрешением. Было бы лучше предотвратить запуск сценария на этих устройствах. Я сделал это, проверив начальную высоту окна. Обновил мой ответ соответственно.
@ambrus Можете ли вы воспроизвести это в codepen / jsfiddle? Я попытался добавить img.img-отзывчивый в нескольких модальных моделях, но я не могу воспроизвести эту ошибку. Возможно, вы можете попробовать это снова без моего сценария. Если это все еще происходит, вы должны сообщить об этом в Bootstrap.
Возможно, вы захотите добавить overflow:hidden чтобы удалить раздражающую полосу прокрутки!
Я использую вышеупомянутое решение, есть ли способ, что модальное всегда на 100% высоты, и если содержание превышает, модальное тело должно прокручиваться, как указано выше.
У меня проблемы с настройкой работы с удаленными модалами. Кажется, что центрирование происходит до того, как контент загружен в модал. После того, как контент загружен, верхние числа крайних позиций заканчиваются. Какие-нибудь решения для этого?
Не работает должным образом на Safari на iPad. Модальные окна расположены вертикально по центру относительно всей страницы, а не только области отображения.
@bernie, можете ли вы сказать мне, на каком поколении Ipad, iOS и Safari вы тестировали это? Похоже, что решение CSS не работает на этом конкретном устройстве.
@dimbslmh Это iPad mini iOS 9.3.2. Не знаю, как получить версию Mozilla/5.0 (iPad; CPU OS 9_3_2 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13F69 Safari/601.1 , но пользовательским агентом является Mozilla/5.0 (iPad; CPU OS 9_3_2 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13F69 Safari/601.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 Спасибо за продолжение! Я открыл сообщение об ошибке здесь: forums.developer.apple.com/message/185166 .
Вам следует использовать padding-top. поле будет нарушать действие закрытия при нажатии на оверлей
Максимальный размер поля для 25% требует, чтобы модал имел высоту 50%.
Это предотвращает нажатие на фон из-за высоты 100vh. Это хорошо для настроек "фон:" статические ".
эта причина исчезает проблема с анимацией
Я обнаружил, что этот ответ отлично работает для меня. Однако, если вы хотите, чтобы пользователи закрывали модальное .modal-dialog нажимая на его фон, обязательно добавьте pointer-events: none в .modal-dialog и pointer-events: auto в .modal-content . Becausu .modal-dialog {height: 100%} покрывает весь столбец выше и ниже модального режима и .modal-dialog {height: 100%} пользователям нажимать на фон в этой области.
в сочетании с предложением @ChingTingWu, наиболее эффективным
@giovannipds Ой, я переименовал свое имя пользователя, потому что оно короче и его легче пометить. Извините за путаницу :)
@wuct, нет проблем, я думаю, что это просто проблема сайта, он должен быть в состоянии найти / найти и заменить ссылки.
Верх содержимого обрезается, когда модальное содержимое имеет прокручиваемый контент (больше содержимого, чем помещается в окне)
Кажется, это отлично работает с Bootstrap 3. Почему это не принятый ответ? Это намного проще (4 директивы CSS), чем другие.
@danielricecodes Я собираюсь сделать снимок и предположить, что это из-за проблем с единицами просмотра. , Предложенный ответ scooterlord предложил совместимость даже с IE9 и iOs, которые, как мне кажется, вызывают беспокойство. Если вы проверите страницу проблем canIuse, вы увидите, что есть проблемы с iOs и IE10 и старше. Не то чтобы я был согласен или нет, что это правильный ответ. Я просто указываю, почему, возможно, это не было выбрано в качестве ответа.
Лучший ответ до сих пор, и я попробовал несколько здесь .... Спасибо
Есть проблема с этим подходом, когда модальное содержимое имеет прокручиваемый контент (больше контента, чем помещается в окне)
Это должен быть принятый ответ. Пока это единственное решение работает для меня. Спасибо за это.
Как новичок в CSS, этот ответ казался наименее пугающим и выполнил свою работу
Это не отвечает на первую часть вопроса: "... когда вы не знаете точную высоту модала?"
Не реагирует на мобильные устройства из-за фиксированной ширины и высоты.
Ваш ответ предполагает, что каждое устройство имеет одинаковое разрешение экрана
Нет человека Полагаю, вы поняли этот пример и способны адаптировать его к каждому случаю.
В Bootstrap v3.3.0 запуск прошел успешно, спасибо
Спасибо. Идеально для меня с одним изменением: dialog.css ("margin-top", Math.max (0, ($ (document) .scrollTop () + (($ (window) .height () - dialog.height ()) / 2))));
С парой настроек селекторов это сработало как шарм. @$modal = $('.fade.in'); modalBox = @$modal.find('.modal-content'); initModalHeight = modalBox.outerHeight(); userScreenHeight = @$modal.outerHeight()
Как и в других решениях transform проблема возникает, когда модальное содержимое имеет прокручиваемый контент (больше содержимого, чем помещается в окне).
Вот модификация, которая может быть применена в вашем собственном коде, без необходимости изменения исходного источника BSDialog: gist.github.com/mahemoff/8ff6d3782d2da6f9cbb3 (только некоторые модификации JS, также они написаны на Coffee, но вы поймете, что идея).
Это могло бы работать довольно хорошо, но у модалей бутстрапа есть абсолюты, внутри фиксированные, внутри того и другого ...: /
Как эти классы связаны с модальностями Bootstrap / Bootstrap?
Хм, в пояснениях говорится, что вы должны объявить рост, а это не то, что я ищу
Единственное, что я вижу (в Google Chrome), это значок красного креста и фон
Как насчет нажатия на иконку ... попробуйте, волшебство случится :)
Не прокручивать, когда модальное содержимое имеет больше, чем помещается в окне
если модальный достаточно большой, это может вызвать проблемы
... к сожалению, я пробовал это, но не мог заставить его работать должным образом - по крайней мере, с моим кодом. Я думаю, что каждый должен настроить это под свои нужды! Спасибо за ответ, хотя.

scooterlord · Accepted Answer · 2013-08-24T20-08-00.000Z

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

Весь смысл использования JavaScript состоял в том, чтобы получить неизвестную высоту модального поля. Ваше решение имеет фиксированную высоту 80%, что не отвечает на ваш собственный вопрос: «Как вы можете расположить модально вертикально в центре, если вы не знаете точную высоту модала ?»
... размер высоты установлен так, чтобы ограничивать максимальную модальную высоту по сравнению с высотой экрана. Однако процент перевода устанавливается в соответствии с высотой CONTENT.
Если вы хотите получить решение, которое не меняет размер модального окна, попробуйте следующее решение css: tweaks.klickagent.ch/#30.05.2014_TwitterBootstrapCenterModal
Очень хорошо, как хорошо. Однако у него другой подход, чем тот, который я описываю. В вашем случае весь модал перемещается вверх и вниз, когда в моем случае создается переполненный элемент. Очень хорошо, хотя! Мне это нравится!
Это требует, чтобы высота была установлена .. Что не совсем то, что просит пользователь.
Очень хорошая скрипка! Я пытаюсь выяснить, как вам удалось удалить всю область нижнего колонтитула (что я пытаюсь сделать в Rstudio / блестящем приложении, но не могу понять это из вашей скрипки. Буду рад, если вы опустите подсказку здесь :)
Модальный нижний колонтитул абсолютно позиционирован, поэтому, если он существует или нет, он находится вне потока DOM. Что действительно важно для вас, так это нижнее значение в пикселях модального тела, которое оставляет необходимое пространство для модального пространства.