Я хотел бы центрировать мой модал в области просмотра (в середине) Я попытался добавить некоторые свойства CSS
.modal { position: fixed; top:50%; left:50%; }
Я использую этот пример http://jsfiddle.net/rniemeyer/Wjjnd/
Я попытался
$("#MyModal").modal('show').css(
{
'margin-top': function () {
return -($(this).height() / 2);
},
'margin-left': function () {
return -($(this).width() / 2);
}
})
javascript
twitter-bootstrap
bootstrap-modal
user2613813
источник
источник
.modal.fade.in
а такжеtranslateY(-50%)
делает верх модальной недоступной, когда модальное содержимое выше высоты устройства).Ответы:
Это делает работу: http://jsfiddle.net/sRmLV/1140/
Он использует вспомогательный div и некоторые пользовательские CSS. Не требуется JavaScript или JQuery.
HTML (на основе демо-кода Bootstrap )
CSS
источник
Поскольку ответ gpcola на меня не сработал, я немного отредактировал его, и теперь он работает. Я использовал "margin-top" вместо transform. Кроме того, я использую событие «показ» вместо «показ», потому что после него произошел очень плохой скачок позиционирования (видно, когда у вас есть анимация начальной загрузки). Обязательно установите отображение «block» перед позиционированием, в противном случае $ dialog.height () будет равно 0, и модальное значение не будет отцентрировано полностью.
источник
$('.modal:visible').each(centerModal);
if(offset < 0) offset = 0;
я вставляю весь блок в случай ответа, который не ясен!Это то, что я сделал для своего приложения. Если вы посмотрите на следующие классы в файле bootstrap.css, то у .modal-dialog есть отступ по умолчанию 10px и экран @media и (min-width: 768px) .modal-dialog имеет верхний отступ, установленный на 30px. Таким образом, в моем собственном файле CSS я установил верхний отступ равным 15% для всех экранов без указания ширины экрана мультимедиа. Надеюсь это поможет.
источник
.modal-dialog.modal-sm { padding-top:15%; }
Лучший способ, который я нашел для всех браузеров HTML5:
источник
align-items: center;
к,body.modal-open .modal
кажется, работает.// Стили
источник
Верхний параметр переопределяется в .modal.fade.in, чтобы принудительно установить значение, заданное в вашей пользовательской декларации, добавить
!important
ключевое слово после top. Это заставляет браузер использовать это значение и игнорировать любые другие значения для ключевого слова. Это имеет тот недостаток, что вы не можете переопределить значение где-либо еще.источник
Это работает для меня отлично:
полный демонстрационный URL: https://codepen.io/dimbslmh/full/mKfCc
источник
Начиная с Bootstrap 4, следующий класс был добавлен для достижения этой цели без JavaScript.
Вы можете найти их документацию здесь .
Спасибо vd за то, что вы указали, что вам нужно добавить оба .modal-dialog-центрированные к .modal-dialog для вертикального центрирования модала.
источник
ты можешь использовать:
центрировать его как вертикально, так и горизонтально.
источник
Поскольку большая часть ответа здесь не сработала или сработала только частично:
Вы должны использовать селектор [style], чтобы применить стиль только к модалу, который активен в настоящее время, а не ко всем модалам.
.in
было бы здорово, но, похоже, он будет добавлен только после завершения перехода, что слишком поздно и делает некоторые действительно плохие переходы. К счастью, кажется, что bootstrap всегда применяет атрибут стиля к модалу, как только начинает показывать, так что это немного странно, но работает.Эта
:not([style='display: none;'])
часть является обходным путем для начальной загрузки, при которой не удаляется атрибут style, а вместо этого при закрытии диалогового окна вместо отображения стиля устанавливается значение none.источник
Вы можете добиться вертикального выравнивания по центру на Bootstrap 3 модально, как это:
и добавьте этот класс CSS в контейнер "модальный диалог"
Рабочий пример jsFiddle: http://jsfiddle.net/U4NRx/
источник
Самый простой и простой способ сделать это - использовать Flexbox! Следующее будет вертикально выравнивать модал Bootstrap 3 по центру экрана и будет намного чище и проще, чем все другие решения, опубликованные здесь:
ПРИМЕЧАНИЕ. Хотя это простейшее решение, оно может работать не для всех из-за поддержки браузера: http://caniuse.com/#feat=flexbox
Похоже (как обычно) IE отстает. В моем случае все продукты, которые я разрабатываю для себя или для клиентов, - это IE10 +. (для бизнеса не имеет смысла тратить время на разработку, поддерживая более старые версии IE, когда его можно использовать для фактической разработки продукта и ускорения выхода MVP). Это, конечно, не роскошь, которая есть у всех.
Я видел более крупные сайты, определяющие, поддерживается ли flexbox, и применяющий класс к телу страницы, но этот уровень разработки интерфейса довольно устойчив, и вам все равно нужен запасной вариант.
Я хотел бы призвать людей принять будущее Интернета. Flexbox потрясающий, и вы должны начать использовать его, если можете.
PS - Этот сайт действительно помог мне понять flexbox в целом и применить его к любому варианту использования: http://flexboxfroggy.com/
РЕДАКТИРОВАТЬ: В случае двух модальных на одной странице, это должно относиться к .modal.in
источник
Преимущества:
display:table-cell
(это не предназначено для макетов)markup
SCSS
для тех, кто используетgulp
илиgrunt
Показать фрагмент кода
Примечание . Я намерен поддерживать этот ответ в актуальном состоянии с учетом последних спецификаций Bootstrap 3. Для решения Bootstrap 4 посмотрите этот ответ (на данный момент они более или менее совпадают, но со временем они могут расходиться). Если вы обнаружите какую-либо ошибку или проблему с ней, дайте мне знать, и я буду обновлять. Спасибо.
Чистый, без префикса
SCSS
(для использования сgulp
/grunt
):источник
Еще одно решение CSS. Не работает для всплывающих окон, которые больше, чем порт просмотра.
В
.modal-dialog
классе переопределяя позицию на абсолютную (от относительной) и центрируя содержимоеright:0, left: 0
В
.modal.fade .modal-dialog , .modal.in .modal-dialog
настройках анимация перехода закончена,top
а не на переводе.margin-top
перемещает всплывающее окно чуть ниже центра в случае небольшого всплывающего окна, а в случае длинных всплывающих окон модальное поле застревает с заголовком. следовательноmargin-top:0, margin-bottom:0
Нужно еще доработать его.
источник
Для тех, кто использует загрузчик angular-ui, можете добавить следующие классы на основе приведенной выше информации:
Примечание. Никаких других изменений не требуется, и это разрешит все модальные параметры.
источник
Не надо нам JavaScript. Boostrap модал добавляет .in класс, когда он появляется. Просто измените эту комбинацию классов с modalclassName.fade.in с помощью flex css, и все готово.
Добавьте эту CSS, чтобы центрировать ваш мод по вертикали и горизонтали.
источник
Мой выбор, немного CSS: (НЕ работает в IE8)
Вы можете поиграть с первым правилом, чтобы изменить то, как выглядит модал.
Использование: Bootstrap 3.3.4
источник
Просто добавьте следующий CSS к вашему существующему, он прекрасно работает для меня
источник
На основании ответа Арани , но и с учетом прокрутки страницы.
источник
Я думаю, что это более чистое решение CSS, чем решение Ренса де Нобеля. Также это не мешает закрывать диалоговое окно, нажимая за его пределами.
http://plnkr.co/edit/JCGVZQ?p=preview
Просто добавьте некоторый класс CSS в контейнер DIV с классом .modal-dialog, чтобы получить более высокую специфичность, чем загрузочный CSS, например .centered.
HTML
И сделайте этот контейнер .modal-dialog.centered фиксированным и правильно расположенным.
CSS
Или даже проще, используя flexbox.
CSS
источник
источник
Это работает в BS3, не проверено в v2. Центрирует модальное положение вертикально. Обратите внимание, что он перейдет туда - если вы хотите, чтобы он просто появлялся в позиции, измените
transition
свойство CSS для.modal-dialog
источник
источник
Это берет ответ Arany и заставляет его работать, если модальное значение выше, чем высота экрана:
источник
Чтобы добавить вертикальное модальное центрирование в bootstrap modal.js, я добавил это в конце
Modal.prototype.show
функции:источник
Сделать модальный вертикально выровнять диалог All All.
/* Заметка:
1. Даже если вам не нужно назначать селектор, он найдет все модальные из документа и сделает его вертикально посередине
2. Чтобы избежать середины какого-то конкретного модала, чтобы он был центром, вы можете использовать: не селектор в событии клика
* /
Из Милана Пандья
источник
Используйте этот простой скрипт, который центрирует модалы.
Если вы хотите, вы можете установить собственный класс (например: .modal.modal-vcenter вместо .modal), чтобы ограничить функциональность только некоторыми модальными моделями.
Также добавьте это CSS исправление для горизонтального расстояния модала; мы показываем прокрутку по модалам, скроллы тела автоматически скрываются Bootstrap:
источник
Другой ответ CSS на этот вопрос ...
Это решение использует CSS только для достижения желаемого эффекта, сохраняя при этом возможность закрывать модальное окно, щелкая за его пределами. Это также позволяет вам устанавливать
.modal-content
максимальную высоту и ширину, чтобы ваше всплывающее окно не выходило за пределы области просмотра. Прокрутка автоматически появляется, когда содержимое выходит за рамки модального размера.примечание:
рекомендованная Bootstrap
.modal-dialog
div
должна быть опущена, чтобы это работало должным образом (похоже, ничего не сломалось). Протестировано в Chrome 51 и IE 11.Код CSS:
EDIT:
.modal-dialog
класс позволяет выбрать , может ли пользователь закрыть модальный, щелкнув вне самого модальный. Большинство модалов имеют явную кнопку «закрыть» или «отменить». Имейте это в виду при использовании этого обходного пути.источник
Лучшее решение для централизации вашего модального с шириной и высотой, в CSS добавить и в модальном добавить это «централизовать» как класс.
источник
Вертикально по центру Добавьте .modal-dialog-центрированный к .modal-dialog для вертикального центрирования модального
Запустить демо-модал
источник