Как выровнять модальное окно bootstrap по центру

Обновлено: 25.04.2024

Позиция

Используйте эти сокращенные утилиты для быстрой настройки положения элемента.

На этой странице

Значения позиции

Здесь представлены доступные классы быстрого позиционирования, хотя они не обладают «отзывчивым» поведением.

Организация элементов

Легко располагайте элементы с помощью утилит для позиционирования краев. Формат - .

Где свойство - одно из:

top - для вертикального верхнего положения
start - для горизонтального левого положения (в LTR)
bottom - для вертикального нижнего положения
end - для горизонтального правого положения (в LTR)

Где позиция - одно из:

0 - для 0 крайнего положения
50 - для 50% крайнего положения
100 - для 100% крайнего положения

(Вы можете добавить больше значений позиции, добавив записи в переменную карты Sass $position-values )

Как сделать, чтобы модальное было по центру экрана?

Проблема в том, что при уменьшение экрана по высоте, модальное окно вылезает за окно браузера. Если, задать высоту, например, 85%, тогда выпадает контент из модального окна. Как сделать так, чтобы модальное окно одинакового хорошо отображалось по высоте?

Стандартная высота браузера:

Уменьшенная высота браузера:

Как выровнять модальное окно bootstrap по центру

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

Если вы пользовались фраймворком bootstrap, то вы знаете что модальные окна всплывают на самом верху. В некоторых случаях нам это не нужно, или попросту это не красиво смотрится.
В этой статье я покажу один из самых простых способов решить эту проблему.

Вот и всё, такой вот маленький и полезный лайфfuck для bootstrap

Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию. Это займёт не более минуты. Не волнуйтесь, мы не спамим!

Вы находитесь на странице скачивания файла. Кнопка загрузки внизу страницы. Если нет кнопки , значит нет файла. Нет файла - просьба сообщить администартору удобным способом. Спасибо большое за понимание!

Реклама - это вынужденная мера для поддержания проекта на плаву. Я не принуждаю Вас кликать по рекламным блокам. Если конечно она вас не заинтересовала.

Да и самое важное, все материалы носят чисто ознакомительный характер, всё файлы взяты из открытых источников, соответсвенно Вы их используете на свой страх и риск. За исключением только моих товаров в магазине.

Выравнивание модального окна по центру

Мой первый пост.
Центрирование блока относительно другого блока относительно часто-попадающаяся задача, это очередное ее решение. Для меня оно стало самым универсальным и покрывающим все кейсы, с которыми я когда-либо сталкивался.

Формулировка
Центрировать модальное окно по горизонтали и вертикали.

Габариты модалки могут быть указаны в любых единицах измерения. Или же могут быть не указаны вовсе.
Отзывчивость. При ресайзе окна, модалка подстраивается под текущий размер.
Если модалка сверстана так, что у нее еcть min-height/min-width, то при ресайзе окна до меньших размеров должен появляться скролл.
IE 9+.
Позиционирование должны быть реализовано на CSS, без применения JS.

Работает прекрасно, нареканий нет. Но нам такой способ не подходит, ибо мы не хотим зависеть от размеров модального окна.

Первый способ, который удовлетворяет всем перечисленным требованиям я увидел у Jabher. Речь идет об использовании свойства transform и его значения translate вместо margin. Вот как это работает:

Магия! Теперь мы не зависим от габаритов .modal_container. Все потому что translate отталкивается от размеров элемента, к которому применятся свойство. Напомню, что процентные значения свойства margin будут вычисляться относительно размеров родителя, что нам явно не подходит.

Теперь о минусах. Используя свойство transform, мы столкнемся с субпиксельным рендерингом. Проще говоря, контент при ресайзе начнет замыливаться, результат выглядит скверно, особенно это заметно при рендере текста и тонких линий, вроде однопиксельных бордеров. Я не смог найти решений этой проблемы, если у вас они есть — пожалуйста, поделитесь в комментариях.

Тадаам

Не так давно я нашел изумительный по своей простоте способ. На помощь спешат инлайн блоки. Их легко центрировать по-горизонтали, навесив text-align: center на родителя. Немного подумав, я вспомнил про замечательное свойство vertical-align. Как оно работает? Если этому свойству задать значение middle, то элементы с этим свойством будут центрироваться по-вертикали друг относительно друга. А это значит, что помимо элемента .modal, в .fixed-overlay должен быть еще кто-то, кто поможет нашей модалке встать по-центру окна. Высота этого кого-то должна быть равна высоте .fixed-overlay. На роль этого помощника напрашивается псевдоэлемент:

Модальное окно

Используйте модальный JavaScript плагин Bootstrap для добавления диалоговых окнон на ваш сайт для лайтбоксов, уведомлений пользователей или полностью настраиваемого контента.

На этой странице

Как это работает

До того как начать работу с модальными компонентами Bootstrap, ознакомьтесь со следующей информацией, т.к. параметры недавно изменились.

Модальные окна сделаны на HTML, CSS и JavaScript. Они располагаются поверх всего документа и блокируют прокрутку тела документа <body> , вместо него прокручивая модальные окна
Клик вне модального элемента автоматически закрывает его.
Bootstrap позволяет активировать лишь один модальный элемент за раз. Вложенные модальные элементы не поддерживаются, т.к. мы думаем, что они принесли бы неудобства.
Модальные элементы имеют position: fixed , что может вызвать иногда их частичную отрисовку. Мы рекомендуем размещать модальные элементы на самом верху страницы, когда возможно, для избегания сбоев и влияния других элементов на корректную работу модальных элементов .modal .
Опять же – из-за position: fixed есть некоторые сложности при использовании их на мобильных устройствах. Смотри документацию поддержки в браузерах.
Из-за семантики HTML5 атрибут autofocus не работает с модальными элементами Bootstrap. Чтобы добиться такого же эффекта, используйте собственный JavaScript:

Эффект анимации этого компонента зависит от медиа-запроса с ограниченным движением prefers-reduced-motion . Смотрите раздел специальных возможностей в нашей документации по редукции анимации.

Далее – демонстрация примеров и инструкции по использованию.

Примеры

Модальные компоненты

Ниже – пример статичного модального компонента (это значит, что его position и display «преодолены»). В примере есть заголовок модального компонента, тело (требуется для padding ), футер модального компонента (по желанию). Мы советуем включать заголовки с отклонением действия, когда возможно, или обеспечить другой явный путь отклонить действие.

Modal title

Modal body text goes here.

Close Save changes

«Живое» демо

Изменяйте (скрывайте\показывайте) рабочий пример модальной демонстрации, нажав кнопку ниже. Он будет скользить вниз и исчезать из верхней части страницы.

Modal title

Woohoo, you're reading this text in a modal!

Close Save changes Launch demo modal

Статический фон

Modal title

I will not close if you click outside me. Don't even try to press escape key.

Close Understood Launch static backdrop modal

Прокрутка длинного содержимого

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

Modal title

This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text the modal, we use an inline style set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.

Close Save changes Launch demo modal

Вы также можете создать прокручиваемый модал, который позволяет прокручивать модальное тело, добавив .modal-dialog-scrollable в .modal-dialog .

Modal title

This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal.

This content should appear at the bottom after you scroll.

Close Save changes Launch demo modal

Вертикальное центрирование

Добавьте .modal-dialog-centered в .modal-dialog чтобы вертикально центрировать модальное окно.

Modal title

This is a vertically centered modal.

Close Save changes

Modal title

This is some placeholder content to show a vertically centered modal. We've added some extra copy here to show how vertically centering the modal works when combined with scrollable modals. We also use some repeated line breaks to quickly extend the height of the content, thereby triggering the scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal.

Close Save changes Vertically centered modal Vertically centered scrollable modal

Всплывающие подсказки и возникающие подсказки

Всплывающие подсказки и возникающие подсказки можно размещать как необходимо. Когда модальные элементы закрыты, любые всплывающие подсказки и возникающие подсказки внутри них также автоматически отменяются.

Modal title

Popover in a modal

This button triggers a popover on click.

Tooltips in a modal

This link and that link have tooltips on hover.

Close Save changes Launch demo modal

Использование сетки

Используйте систему сеток Bootstrap внутри модального элемента, расположив .container-fluid внутри .modal-body . После этого используйте обычную систему сеток обычным образом.

Grids in modals

.col-md-4 .ms-auto .col-md-3 .ms-auto .col-md-2 .ms-auto .col-md-6 .ms-auto Level 1: .col-sm-9 Level 2: .col-8 .col-sm-6 Level 2: .col-4 .col-sm-6 Close Save changes Launch demo modal

Комбинируйте содержимое модальных элементов

Есть много кнопок, которые все запускают один модальный элемент со слегка разным содержимым? Используйте event.relatedTarget и атрибуты data-bs-* для изменения содержимого в зависимости от нажатой кнопки.

Ниже – пример демо с кодом HTML и JavaScript. Для информации по relatedTarget читайте инфо по событиям модальных элементов.

Open modal for @mdo Open modal for @fat Open modal for @getbootstrap

New message

Close Send message

Переключение между модальными окнами

Переключайтесь между несколькими модальными окнами с помощью умного размещения атрибутов data-bs-target и data-bs-toggle . Например, Вы можете переключить модальное окно сброса пароля из уже открытого модального окна входа. Обратите внимание, что несколько модальных окон не могут быть открыты одновременно - этот метод просто переключает между двумя отдельными модальными окнами.

Modal 1

Show a second modal and hide this one with the button below. Open second modal

Modal 2

Hide this modal and show the first with the button below. Back to first

Изменение анимации

Переменная $modal-fade-transform определяет состояние преобразования .modal-dialog перед анимацией постепенного появления, переменная $modal-show-transform определяет преобразование .modal-dialog в конце модального появления анимация.

Если вы хотите, например, анимацию увеличения, вы можете установить $modal-fade-transform: scale(.8) .

Анимация при удалении

Для модальных элементов, которые возникают простым способом, а не появляются плавно, удалите из кода модального элемента класс .fade .

Динамическая высота

Если высота модального элемента изменяется при его открытии, вам следует вызвать myModal.handleUpdate() для обновления позиции модального элемента в случае, если возникнет полоса прокрутки.

Доступность

Удостоверьтесь, что добавили aria-labelledby=". " со ссылкой на модальный заголовок в .modal . Дополнительно вы можете описать диалог модального элемента атрибутом aria-describedby , добавленным в .modal . Обратите внимание, что вам не нужно добавлять role="dialog" , поскольку мы уже добавляем его через JavaScript.

Встраивание видео из YouTube

Встраивание видео в модальные элементы требует дополнительного JavaScript для запрета автоматического воспроизведения и т.д. Дополнительная информация здесь.

Дополнительные размеры

У модальных элементов есть два размера, доступных к изменению через классы-модификаторы, которые надо размещать в элементе .modal-dialog . Эти размеры включаются на определенных брейкпойнтах, чтобы избежать появления горизонтальных полос прокрутки на более узких зонах просмотра.

Размер	Клас	Максимальная ширина модали (max-width)
Маленький (Small)	.modal-sm	300px
Стандартный (Default)	None	500px
Большой (Large)	.modal-lg	800px
Очень большой (Extra large)	.modal-xl	1140px

Наш модальный класс по умолчанию без модификаторов представляет собой модальное окно “среднего” (“medium”) размера.

Extra large modal Large modal Small modal

Extra large modal

Large modal

Small modal

Полноэкранная модаль

Для охвата всей области просмотра возможно переопределение отображения модального окна через классы модификаторов, размещенных в диалоговом окне .modal-dialog .

Класс	Доступность
.modal-fullscreen	Всегода
.modal-fullscreen-sm-down	Below 576px
.modal-fullscreen-md-down	Below 768px
.modal-fullscreen-lg-down	Below 992px
.modal-fullscreen-xl-down	Below 1200px
.modal-fullscreen-xxl-down	Below 1400px

Full screen Full screen below sm Full screen below md Full screen below lg Full screen below xl Full screen below xxl

Full screen modal

Full screen below sm

Full screen below md

Full screen below lg

Full screen below xl

Full screen below xxl

Переменные

Адаптивные полноэкранные модальные окна генерируются с помощью карты $breakpoints и цикла в scss/_modal.scss .

Использование

Плагин модальных элементов переключает состояние вашего скрытого содержимого по требованию с помощью атрибутов или JavaScript. Он также добавляет в <body> класс .modal-open для преодоления поведения при прокрутке по умолчанию, и создает зону для клика вне модального элемента, нужную для закрытия открытых модальных элементов, класс .modal-backdrop .

Через атрибуты

Через JavaScript

Создайте модальное окно одной строкой в JavaScript:

Параметры

Параметры можно передавать атрибутами или JavaScript. Для использования атрибутов добавьте имя параметра в data-bs- , например data-bs-backdrop="" .

Название	Тип	По умолч.	Описание
backdrop	boolean or the string 'static'	true	Подключает модальный элемент с затемненным фоном. Еще – задает static для фона, который не закрывает модальный элемент по клику на фоне.
keyboard	boolean	true	Закрывает модальный элемент по нажатию ESC
focus	boolean	true	Фокусируется на модальном элементе по инициализации.

Методы

Асинхронные методы и переходы

Все методы API асинхронны и запускают переход. Они возвращаются функции, вызвавшей их, с началом перехода, но до его конца. Плюс, вызов метода к компоненту, выполняющему переход, будет проигнорирован.

Параметры

Активирует содержимое как модальный элемент. Принимает object параметров.

toggle

Вручную изменяет состояние модального элемента. Возвращается к функции-вызову до того, как модальный элемент показан или скрыт. (т.е. до того, как произойдет событие shown.bs.modal или hidden.bs.modal ).

Вручную открывает модальный элемент. Возвращается к функции-вызову до того, как модальный элемент показан. (т.е. до того, как произойдет событие shown.bs.modal ).

Вручную прячет модальный элемент. Возвращается к функции-вызову до того, как модальный элемент показан. (т.е. до того, как произойдет событие hidden.bs.modal ).

handleUpdate

Вручную обновляет позицию модального элемента, если высота его изменяется во время открытия (т.е. в случае возникновения полосы прокрутки).

dispose

Уничтожает модальный элемент.

getInstance

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

События

Модальный элемент в Bootstrap имеет несколько событий для встраивания в функциональность. Все события модальных элементов запускаются внутри самих элементов (т.е. в <div > ).

как полностью уничтожить модальное окно bootstrap?

Я сделал использование модальное окно для реализации мастер, который имеет около 4,5 шагов. Мне нужно уничтожить его полностью после последний шаг(onFinish) и OnCancel шаг без обновления страницы. Я могу, конечно, скрыть его, но скрытие модальных окон восстанавливает все как таковое, когда я снова открываю его. Может кто-нибудь помочь мне в этом вопросе?

спасибо Любые подсказки ответы полезны для меня.

если Bootstrap 3. Вы можете использовать:

Примечание: это решение работает только для Bootstrap до версии 3. Ответ на Bootstrap 3 см. В разделе это один по user2612497.

что вы хотите сделать, это:

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

или всякий раз, когда вы хотите, чтобы вызвать уничтожение элемента (в случае, если это на самом деле не каждый раз, когда вы скрываете его) вы просто должны вызвать среднюю линию:

Twitter bootstrap ищет свой экземпляр, который будет расположен в атрибуте данных, если экземпляр существует, он просто переключает его, если экземпляр не существует, он создаст новый.

надеюсь, что это поможет.

2017-05-23 15:02:48 Conar Welsh

для 3.X версии

для 2.x версия (рискованно; читать комментарии ниже) При создании bootstrap модальные три элемента на Вашей странице изменяются. Поэтому, если вы хотите полностью откатить все изменения, вы должны сделать это вручную для каждого из них.

2015-02-02 22:29:34 zeliboba

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

но он полностью удалит модальный с вашей html-страницы. После этого модальное скрытие шоу работать не будет.

2015-04-06 15:34:20 Arjun

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

Если ты хочешь использовать его в качестве динамического шаблона просто сделать что-то вроде

2012-11-10 00:47:47 Robert

сила jQuery. $(selector).modal('hide').destroy(); сначала удалит синды у вас может быть скользящий эффект, а затем полностью удаляет элемент, однако если вы хотите, чтобы пользователь мог снова открыть модальный после завершения шагов. вы можете просто обновить только те настройки, которые вы хотите сбросить, поэтому для сброса всех входов в вашем модальном режиме это будет выглядеть следующим образом:

2012-11-12 02:35:46 John In't Hout

Если у вас есть iframe в модальном, вы можете удалить его содержимое на следующий код:

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

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

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

Я пробовал использовать это:

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

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

2015-07-15 16:15:31 Finik

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

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

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

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

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

Модальное окно

На этой странице

Как это работает

Модальные окна сделаны на HTML, CSS и JavaScript. Они располагаются поверх всего документа и блокируют прокрутку тела документа <body> , вместо него прокручивая модальные окна
Клик вне модального элемента автоматически закрывает его.
Bootstrap позволяет активировать лишь один модальный элемент за раз. Вложенные модальные элементы не поддерживаются, т.к. мы думаем, что они принесли бы неудобства.
Модальные элементы имеют position: fixed , что может вызвать иногда их частичную отрисовку. Мы рекомендуем размещать модальные элементы на самом верху страницы, когда возможно, для избегания сбоев и влияния других элементов на корректную работу модальных элементов .modal .
Опять же – из-за position: fixed есть некоторые сложности при использовании их на мобильных устройствах. Смотри документацию поддержки в браузерах.
Из-за семантики HTML5 атрибут autofocus не работает с модальными элементами Bootstrap. Чтобы добиться такого же эффекта, используйте собственный JavaScript:

Далее – демонстрация примеров и инструкции по использованию.

Примеры

Модальные компоненты

Modal title

Modal body text goes here.

Close Save changes

«Живое» демо

Modal title

Woohoo, you're reading this text in a modal!

Close Save changes Launch demo modal

Статический фон

Modal title

I will not close if you click outside me. Don't even try to press escape key.

Close Understood Launch static backdrop modal

Прокрутка длинного содержимого

Modal title

Close Save changes Launch demo modal

Modal title

This content should appear at the bottom after you scroll.

Close Save changes Launch demo modal

Вертикальное центрирование

Добавьте .modal-dialog-centered в .modal-dialog чтобы вертикально центрировать модальное окно.

Modal title

This is a vertically centered modal.

Close Save changes

Modal title

Close Save changes Vertically centered modal Vertically centered scrollable modal

Всплывающие подсказки и возникающие подсказки

Modal title

Popover in a modal

This button triggers a popover on click.

Tooltips in a modal

This link and that link have tooltips on hover.

Close Save changes Launch demo modal

Использование сетки

Grids in modals

.col-md-4 .ms-auto .col-md-3 .ms-auto .col-md-2 .ms-auto .col-md-6 .ms-auto Level 1: .col-sm-9 Level 2: .col-8 .col-sm-6 Level 2: .col-4 .col-sm-6 Close Save changes Launch demo modal

Комбинируйте содержимое модальных элементов

Ниже – пример демо с кодом HTML и JavaScript. Для информации по relatedTarget читайте инфо по событиям модальных элементов.

Open modal for @mdo Open modal for @fat Open modal for @getbootstrap

New message

Close Send message

Переключение между модальными окнами

Modal 1

Show a second modal and hide this one with the button below. Open second modal

Modal 2

Hide this modal and show the first with the button below. Back to first

Изменение анимации

Если вы хотите, например, анимацию увеличения, вы можете установить $modal-fade-transform: scale(.8) .

Анимация при удалении

Динамическая высота

Доступность

Встраивание видео из YouTube

Дополнительные размеры

Размер	Клас	Максимальная ширина модали (max-width)
Маленький (Small)	.modal-sm	300px
Стандартный (Default)	None	500px
Большой (Large)	.modal-lg	800px
Очень большой (Extra large)	.modal-xl	1140px

Extra large modal Large modal Small modal

Extra large modal

Large modal

Small modal

Полноэкранная модаль

Класс	Доступность
.modal-fullscreen	Всегода
.modal-fullscreen-sm-down	Below 576px
.modal-fullscreen-md-down	Below 768px
.modal-fullscreen-lg-down	Below 992px
.modal-fullscreen-xl-down	Below 1200px
.modal-fullscreen-xxl-down	Below 1400px

Full screen Full screen below sm Full screen below md Full screen below lg Full screen below xl Full screen below xxl

Full screen modal

Full screen below sm

Full screen below md

Full screen below lg

Full screen below xl

Full screen below xxl

Переменные

Адаптивные полноэкранные модальные окна генерируются с помощью карты $breakpoints и цикла в scss/_modal.scss .

Использование

Через атрибуты

Через JavaScript

Создайте модальное окно одной строкой в JavaScript:

Параметры

Название	Тип	По умолч.	Описание
backdrop	boolean or the string 'static'	true	Подключает модальный элемент с затемненным фоном. Еще – задает static для фона, который не закрывает модальный элемент по клику на фоне.
keyboard	boolean	true	Закрывает модальный элемент по нажатию ESC
focus	boolean	true	Фокусируется на модальном элементе по инициализации.

Методы

Асинхронные методы и переходы

Параметры

Активирует содержимое как модальный элемент. Принимает object параметров.

toggle

handleUpdate

dispose

Уничтожает модальный элемент.

getInstance

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

События

Bootstrap 3 modal vertical position center

How can you position the modal vertically in the center when you don't know the exact height of the modal?

Is it possible to have the modal centered and have overflow:auto in the modal-body, but only if the modal exceeds the screen height?

I have tried using this:

This gives me the result I need when the content is much larger than vertical screen size, but for small modal contents it's pretty much unusable.

73 1 1 silver badge 8 8 bronze badges asked Aug 24 '13 at 19:18

scooterlord scooterlord 14.3k 11 11 gold badges 44 44 silver badges 65 65 bronze badges @Heiken for some reason this makes me jump down on the screen, Im using chrome Jan 3 '15 at 17:34

34 Answers 34

And adjust a little bit .fade class to make sure it appears out of the top border of window, instead of center

1,039 18 18 silver badges 32 32 bronze badges answered Aug 6 '14 at 12:09 3,867 2 2 gold badges 9 9 silver badges 2 2 bronze badges I was actually overriding this by mistake, thanks for pointing out out it actually works behind the scenes. Nov 13 '14 at 17:36 Jan 20 '15 at 2:05 I clarify that this does not work very well on Mobile. Because the definition ":after" having a height of 100% and can automatically move the modal to down of the page. I just solved declaring .modal .modal-dialog . The 92.97% of people already have support using this CSS property, however for general suporte can use JavaScript to set the margins. Apr 4 '15 at 23:22 May 18 '15 at 14:28 This solution shift modal window to right for 2px, cause :before element. But this can be solved by add same code for :after Oct 6 '15 at 5:41

1. How can you position the modal vertically in the center when you don't know the exact height of the modal?

To absolute center the Bootstrap 3 Modal without declaring a height, you will first need to overwrite the Bootstrap CSS by adding this to your style sheet:

This will position the modal-dialogs top-left corner in the center of the window.

We have to add this media query or else the modal margin-left is wrong on small devices:

Now we will need to adjust its position with JavaScript. To do that we give the element a negative top and left margin equal to half of its height and width. In this example we will be using jQuery since it is available with Bootstrap.

Update (01/10/2015):

Notice the negative margin-right? This removes the space added by inline-block. That space causes the modal to jump to the bottom of the page @media width < 768px.

2. Is it possible to have the modal centered and have overflow:auto in the modal-body, but only if the modal exceeds the screen height?

This is possible by giving the modal-body an overflow-y:auto and a max-height. This takes a bit more work to get it working properly. Start with adding this to your style sheet:

We will use jQuery again to get the window height and set the max-height of the modal-content first. Then we have to set the max-height of the modal-body, by subtracting the modal-content with the modal-header and modal-footer:

Читайте также: