Это вопрос из двух частей:
Как вы можете расположить модально вертикально в центре, если вы не знаете точную высоту модала?
Возможно ли иметь модальное центрирование и иметь переполнение: auto в модальном теле, но только если модальное стекло превышает высоту экрана?
Я попытался с помощью этого:
.modal-dialog {
height: 80% !important;
padding-top:10%;
}
.modal-content {
height: 100% !important;
overflow:visible;
}
.modal-body {
height: 80%;
overflow: auto;
}
Это дает мне результат, который мне нужен, когда контент намного больше, чем вертикальный размер экрана, но для небольшого модального контента он практически бесполезен.
css
twitter-bootstrap
modal-dialog
center
scooterlord
источник
источник
Ответы:
И немного подкорректируйте класс .fade, чтобы он появлялся за верхней границей окна, а не по центру
источник
1. Как вы можете расположить модально вертикально в центре, если вы не знаете точную высоту модала?
Для абсолютного центрирования Bootstrap 3 Modal без объявления высоты, вам сначала нужно перезаписать Bootstrap CSS, добавив это в свою таблицу стилей:Это поместит модальный диалог в верхнем левом углу в центре окна.
Мы должны добавить этот медиа-запрос, иначе модальное поле left не верно на небольших устройствах:
Теперь нам нужно настроить его положение с помощью JavaScript. Для этого мы даем элементу отрицательное верхнее и левое поле, равное половине его высоты и ширины. В этом примере мы будем использовать jQuery, поскольку он доступен с Bootstrap.
Обновление (01.10.2015):
Добавление на ответ Финика . Кредиты на Центрирование в Неизвестном .
Обратите внимание на отрицательную маржу, верно? Это удаляет пространство, добавленное встроенным блоком. Это пространство заставляет модал перейти к нижней части страницы @media width <768px.
2. Можно ли центрировать модал и иметь переполнение: auto в модальном теле, но только если модал превышает высоту экрана?
Это возможно, давая модальному телу overflow-y: auto и max-height. Требуется немного больше работы, чтобы заставить это работать должным образом. Начните с добавления этого в свою таблицу стилей:Мы снова будем использовать jQuery, чтобы получить высоту окна и сначала установить максимальную высоту модального содержимого. Затем мы должны установить максимальную высоту модального тела, вычитая модальное содержимое с помощью modal-header и modal-footer:
Вы можете найти рабочую демонстрацию здесь с Bootstrap 3.0.3: http://cdpn.io/GwvrJРЕДАКТИРОВАТЬ: я рекомендую использовать обновленную версию вместо этого для более гибкого решения: http://cdpn.io/mKfCcОбновление (30/11/2015):
(Обновлено 30/11/2015 http://cdpn.io/mKfCc с вышеуказанным редактированием)
источник
Мое решение
источник
Это можно просто исправить
display: flex
С префиксом
источник
Я пришел с чистым решением CSS! Это css3, что означает, что ie8 или ниже не поддерживается, но кроме этого он протестирован и работает на ios, android, ie9 +, chrome, firefox, десктоп-сафари.
Я использую следующие CSS:
Вот скрипка. http://codepen.io/anon/pen/Hiskj
... выбрав это как правильный ответ, так как нет более тяжелого javascript, который ставит браузер на колени в случае более чем одного модального режима.
источник
Если вы в порядке с использованием flexbox, это должно помочь решить эту проблему.
источник
pointer-events: none
в.modal-dialog
иpointer-events: auto
к.modal-content
. Becausu.modal-dialog {height: 100%}
охватывает весь столбец выше и ниже модальной зоны и запрещает пользователям нажимать на фон в этой области.Мое решение:
источник
Все, что я сделал в моем случае, это установил Top в моем css, зная высоту модального
<div id="myModal" class="modal fade"> ... </div>
в моем CSS я установил
источник
Добавление этого простого CSS также работает.
источник
Есть самый простой способ сделать это, используя css:
Вот и все. Обратите внимание, что его нужно применять только к
.modal-dialog
контейнеру div.Демо: https://jsfiddle.net/darioferrer/0ueu4dmy/
источник
В дополнение к отличному ответу @ Finik, это исправление применяется только к немобильным устройствам. Я тестировал в IE8, Chrome и Firefox 22 - он работает с очень длинным или коротким контентом.
источник
Самое универсальное решение, которое я написал. Динамически вычисляется с высотой диалога. (Следующим шагом может быть пересчет высоты диалогов при изменении размера окна.)
JSfiddle: http://jsfiddle.net/8Fvg9/3/
источник
Найдено идеальное решение здесь
источник
источник
@$modal = $('.fade.in'); modalBox = @$modal.find('.modal-content'); initModalHeight = modalBox.outerHeight(); userScreenHeight = @$modal.outerHeight()
Вот еще один метод css only, который работает довольно хорошо и основан на этом: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
дерзость:
источник
transform
решений, проблема возникает, когда модальное содержимое имеет прокручиваемый контент (больше контента, чем помещается в окне)я загрузил bootstrap3-dialog по ссылке ниже и изменил функцию открытия в bootstrap-dialog.js
https://github.com/nakupanda/bootstrap3-dialog
Код
Css
источник
Это работает для меня:
источник
Попробуйте что-то вроде этого:
источник
Возможно, вы захотите проверить этот набор методов для абсолютного центрирования div: http://codepen.io/shshaw/full/gEiDt
источник
Простой способ Работа для меня Спасибо rensdenobel :) http://jsfiddle.net/rensdenobel/sRmLV/13/
источник
еще одно решение, которое установит правильную позицию для каждого видимого модального
window.resize
события и событияshow.bs.modal
:источник
источник
Я знаю, что уже немного поздно, но я добавляю новый ответ, чтобы он не терялся в толпе. Это решение для кросс-десктопного мобильного браузера, которое работает везде, как и должно.
Это просто нужно
modal-dialog
обернуть внутриmodal-dialog-wrap
класса и иметь следующие дополнения кода:Диалог начинается по центру, а в случае большого содержимого он просто увеличивается вертикально, пока не появится полоса прокрутки.
Вот рабочая скрипка для вашего удовольствия!
https://jsfiddle.net/v6u82mvu/1/
источник
Это довольно старое решение, и оно требует решения с использованием Bootstrap 3, но для тех, кто интересуется: начиная с Bootstrap 4 и далее существует встроенное решение под названием
.modal-dialog-centered
. Вот проблема: https://github.com/twbs/bootstrap/issues/23638Так что, используя v4, вам просто нужно добавить
.modal-dialog-centered
к.modal-dialog
центру по вертикали:источник
Подумайте об использовании загрузочного подключаемого модуля начальной загрузки - https://github.com/jschr/bootstrap-modal
Плагин будет центрировать все ваши модалы
источник
Для центрирования я не понимаю, что происходит с чрезмерно сложными решениями. bootstrap уже центрирует его по горизонтали для вас, так что вам не нужно возиться с этим. Мое решение - установить верхнее поле только с помощью jQuery.
Я использовал событиеloaded.bs.modal, так как я удаленно загружаю контент, а использование свойства selected.ba.modal приводит к неверному вычислению высоты. Конечно, вы можете добавить событие для изменяемого размера окна, если вам нужно, чтобы оно было таким отзывчивым.
источник
Очень простой способ реализовать эту концепцию, и вы всегда будете получать модальные моды в своем экране с помощью css как fllow: http://jsfiddle.net/jy0zc2jc/1/
Вы должны просто
modal
отобразить класс в виде таблицы следующим образом:и
modal-dialog
какdisplay:table-cell
см. полный рабочий пример в данной скрипке
источник
это не так сложно.
пожалуйста попробуйте это:
источник
Используйте этот простой скрипт, который центрирует модалы.
Если вы хотите, вы можете установить пользовательский класс (например: .modal.modal-vcenter вместо .modal), чтобы ограничить функциональность только некоторыми модальностями.
Также добавьте это CSS исправление для горизонтального расстояния модала; мы показываем прокрутку по модалам, скроллы тела автоматически скрываются Bootstrap:
источник
В мобильном Plantform это может выглядеть немного иначе, вот мой код.
источник