Я хотел бы сосредоточить свой модальный на окне просмотра (в середине) Я попытался добавить некоторые свойства 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);
}
})
Выполняет эту задачу: http://jsfiddle.net/sRmLV/1140/
Он использует вспомогательный-div и некоторый пользовательский css. Не требуется javascript или jQuery.
HTML (на основе Bootstrap демонстрационный код)
<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">×</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>
CSS
.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
/* To center vertically */
display: table-cell;
vertical-align: middle;
pointer-events:none;
}
.modal-content {
/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
width:inherit;
max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
height:inherit;
/* To center horizontally */
margin: 0 auto;
pointer-events: all;
}
Поскольку ответ gpcola не работал у меня, я немного отредактировал его работы. Вместо преобразования я использовал "margin-top". Кроме того, я использую "показ" вместо "показанного" события, потому что после того, как он дал мне очень плохой прыжок позиционирования (видимый, когда вы включаете анимацию начальной загрузки). Обязательно установите для дисплея "блокировку" перед позиционированием, иначе $dialog.height() будет 0, а модальное значение не будет полностью центрировано.
(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));
Это то, что я сделал для своего приложения. Если вы посмотрите на следующие классы в файле bootstrap.css.modal-dialog имеет по умолчанию заполнение экрана 10px и @media и (min-width: 768px). Модем-диалог имеет верхнее заполнение, установленное на 30 пикселей. Таким образом, в моем пользовательском файле css я установил, что моя верхняя часть составляет 15% для всех экранов, не указав ширину экрана мультимедиа. Надеюсь это поможет.
.modal-dialog {
padding-top: 15%;
}
Лучший способ, который я нашел для всех браузеров HTML5:
body.modal-open .modal {
display: flex !important;
height: 100%;
}
body.modal-open .modal .modal-dialog {
margin: auto;
}
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="table">
<div class="table-cell">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</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>
</div>
//Стили
.table {
display: table;
height:100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
Верхний параметр переопределяется в .modal.fade.in, чтобы принудительно установить значение в вашем пользовательском объявлении, добавьте ключевое слово !important после вершины. Это заставляет браузер использовать это значение и игнорировать любые другие значения для ключевого слова. Это имеет недостаток, что вы не можете переопределить значение где-либо еще.
.modal {
position: fixed;
top: 50% !important;
left: 50%;
}
Поскольку большая часть ответа здесь не работала или только частично работала:
body.modal-open .modal[style]:not([style='display: none;']) {
display: flex !important;
height: 100%;
}
body.modal-open .modal[style]:not([style='display: none;']) .modal-dialog {
margin: auto;
}
Вы должны использовать селектор [style], чтобы применить стиль только к модальному активному, а не ко всем модалам. .in было бы здорово, но, похоже, оно добавляется только после того, как переход завершен, что слишком поздно и делает некоторые действительно плохие переходы. К счастью, bootstrap всегда применяет атрибут стиля к модальному, так как он начинает показывать, так что это немного взломанно, но он работает.
Часть :not([style='display: none;']) - это обходной путь для начальной загрузки, неправильно удаляющий атрибут стиля, и вместо этого, когда вы закрываете диалог, вместо отображения стиля отображается значение none.
Это отлично работает для меня:
.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;
}
complete Демо URL: https://codepen.io/dimbslmh/full/mKfCc
Вы можете достичь центра вертикального выравнивания на Bootstrap 3 так:
.modal-vertical-centered {
transform: translate(0, 50%) !important;
-ms-transform: translate(0, 50%) !important; /* IE 9 */
-webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */
}
и добавьте этот класс css в контейнер "модальный диалог"
<div class="modal-dialog modal-vertical-centered">
...
jsFiddle рабочий пример: http://jsfiddle.net/U4NRx/
Самый чистый и простой способ сделать это - использовать Flexbox! Следующее будет вертикально выровнять модуль Bootstrap 3 в центре экрана и будет настолько чище и проще, чем все другие решения, размещенные здесь:
body.modal-open .modal.in {
display: flex !important;
align-items: center;
}
ПРИМЕЧАНИЕ. Хотя это самое простое решение, оно может не работать для всех из-за поддержки браузера: http://caniuse.com/#feat=flexbox
Похоже, (по привычке) IE отстает. В моем случае все продукты, которые я разрабатываю для себя или для клиентов, - это IE10+. (разумно не инвестировать время разработки, поддерживающее более старые версии IE, когда его можно использовать для фактического развития продукта и ускорения выхода MVP). Это, конечно, не роскошь, которая у всех есть.
Я видел, что более крупные сайты обнаруживают, поддерживается ли или поддерживается flexbox и применяет класс к телу страницы, но этот уровень интерфейсной инженерии довольно устойчив, и вам все равно потребуется резервное копирование.
Я бы призвал людей принять будущее Интернета. flexbox является удивительным, и вы должны начать использовать его, если сможете.
P.S. - Этот сайт действительно помог мне понять flexbox в целом и применить его в любом случае: http://flexboxfroggy.com/
EDIT: в случае двух модалов на одной странице это должно относиться к .modal.in
вы можете использовать:
.modal {
position: fixed;
top: 50% !important;
left: 50%;
transform: translate(-50%, -50%);
}
чтобы центрировать его как по вертикали, так и по горизонтали.
Еще одно решение для CSS. Не работает для всплывающих окон, которые больше, чем порт представления.
.modal-dialog {
position: absolute;
right: 0;
left: 0;
margin-top: 0;
margin-bottom: 0;
}
.modal.fade .modal-dialog {
transition: top 0.4s ease-out;
transform: translate(0, -50%);
top: 0;
}
.modal.in .modal-dialog {
transform: translate(0, -50%);
top: 50%;
}
В классе .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 bootstrap, можно добавить следующие классы, основанные на информации выше:
Примечание. Никаких других изменений не требуется, и он должен разрешить все модальности.
// The 3 below classes have been placed to make the modal vertically centered
.modal-open .modal{
display:table !important;
height: 100%;
width: 100%;
pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.modal-dialog{
display: table-cell;
vertical-align: middle;
pointer-events: none;
}
.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;
pointer-events: all;
}
Мой выбор, немного CSS: (НЕ работает в IE8)
.modal.fade .modal-dialog {
transform: translate(-50%, -80%);
}
.modal.in .modal-dialog {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-top: 0px;
}
Вы можете играть с первым правилом, чтобы изменить способ отображения модальности.
Использование: Bootstrap 3.3.4
Просто добавьте следующий CSS к вам существующий, он отлично работает для меня
.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;
}
На основе ответа Arany, но также учитывает прокрутку страницы.
(function($) {
"use strict";
function positionModals(e) {
var $this = $(this).css('display', 'block'),
$window = $(window),
$dialog = $this.find('.modal-dialog'),
offset = ($window.height() - $window.scrollTop() - $dialog.height()) / 2,
marginBottom = parseInt($dialog.css('margin-bottom'), 10);
$dialog.css('margin-top', offset < marginBottom ? marginBottom : offset);
}
$(document).on('show.bs.modal', '.modal', positionModals);
$(window).on('resize', function(e) {
$('.modal:visible').each(positionModals);
});
}(jQuery));
Я думаю, что это немного более чистое решение для CSS, чем решение Rens de Nobel. Кроме того, это не препятствует закрытию диалогового окна, вызывая его за пределами.
http://plnkr.co/edit/JCGVZQ?p=preview
Просто добавьте некоторый класс CSS в контейнер DIV с классом .modal-dialog, чтобы получить более высокую специфичность, чем загрузочные CSS, например..centered.
HTML
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog centered modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>
И сделайте этот контейнер .modal-dialog.centered неподвижным и правильно расположенным.
CSS
.modal .modal-dialog.centered {
position: fixed;
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
}
Или даже проще использовать flexbox.
CSS
.modal {
display: flex;
align-items: center;
justify-content: center;
}
Это работает в BS3, не проверяется в версии 2. Он центрирует модальную вертикаль. Обратите внимание, что он перейдет туда - если вы хотите, чтобы он просто отображался в позиции edit CSS transition свойство для .modal-dialog
centerModal = function() {
var $dialog = $(this).find(".modal-dialog"),
offset = ($(window).height() - $dialog.height()) / 2;
// Center modal vertically in window
$dialog.css({
'transform': 'translateY(' + offset + 'px) !important',
});
};
$('.modal').on('shown.bs.modal', centerModal);
$(window).on("resize", function() {
$('.modal').each(centerModal);
});
e(document).on('show.bs.modal', function () {
if($winWidth < $(window).width()){
$('body.modal-open,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',$(window).width()-$winWidth)
}
});
e(document).on('hidden.bs.modal', function () {
$('body,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',0)
});
Это заставляет Arany отвечать и заставляет его работать, если модаль выше высоты экрана:
function centerModal() {
$(this).css('display', 'block');
var $dialog = $(this).find(".modal-dialog");
var offset = ($(window).height() - $dialog.height()) / 2;
//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
var bottomMargin = $dialog.css('marginBottom');
bottomMargin = parseInt(bottomMargin);
if(offset < bottomMargin) offset = bottomMargin;
$dialog.css("margin-top", offset);
}
$('.modal').on('show.bs.modal', centerModal);
$(window).on("resize", function () {
$('.modal:visible').each(centerModal);
});
Чтобы сделать диалог Modal verically Align Middle All.
/* Примечание:
1. Даже если вам не нужно назначать селектор, он найдет все модальные данные из документа и сделает его вертикально средним.
2. Чтобы избежать среднего определенного модального, чтобы он был центром, вы можете использовать: не selector в событии click
*/
$( "[data-toggle='modal']" ).click(function(){
var d_tar = $(this).attr('data-target');
$(d_tar).show();
var modal_he = $(d_tar).find('.modal-dialog .modal-content').height();
var win_height = $(window).height();
var marr = win_height - modal_he;
$('.modal-dialog').css('margin-top',marr/2);
});
Из Милана Пандии
Чтобы добавить вертикальное модальное центрирование в bootstrap modal.js, я добавил это в конце функции Modal.prototype.show:
var $modalDialog = $('.modal-dialog'),
modalHeight = $modalDialog.height(),
browserHeight = window.innerHeight;
$modalDialog.css({'margin-top' : modalHeight >= browserHeight ? 0 : (browserHeight - modalHeight)/2});
<сильные > Преимущества:
display:table-cell (это не предназначено для макетов)markupSCSS для тех, кто использует gulp или grunt
// closes the modal on click/tap below/above the modal
$('.modal-dialog').on('click tap', function(e){
if (e.target.classList.contains('modal-dialog')) {
$('.modal').modal('hide');
}
}).modal-dialog {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow-y: auto;
min-height: -webkit-calc(100vh - 60px);
min-height: -moz-calc(100vh - 60px);
min-height: calc(100vh - 60px);
}
@media (max-width: 767px) {
.modal-dialog {
min-height: -webkit-calc(100vh - 20px);
min-height: -moz-calc(100vh - 20px);
min-height: calc(100vh - 20px);
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</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>Используйте этот простой 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;
}
Еще один ответ CSS на этот вопрос...
Это решение использует CSS только для достижения желаемого эффекта, сохраняя при этом возможность закрыть модальную систему, щелкнув за ней. Он также позволяет установить максимальные значения высоты и ширины .modal-content, чтобы ваше всплывающее окно не увеличивалось за пределами области просмотра. Скролл будет автоматически появляться, когда содержание будет превышать размер модальности.
Примечание:
Рекомендуемый Bootstrap .modal-dialog div должен быть опущен, чтобы это работало должным образом (похоже, ничего не сломало). Протестировано в Chrome 51 и IE 11.
Код CSS:
.modal {
height: 100%;
width: 100%;
}
.modal-content {
margin: 0 auto;
max-height: 600px;
max-width: 50%;
overflow: auto;
transform: translateY(-50%);
}
EDIT:
Класс .modal-dialog позволяет вам выбрать, может ли пользователь закрыть модальный режим, щелкнув вне самого модала. Большинство модалов имеют явную кнопку "закрыть" или "отменить". Помните об этом при использовании этого обходного пути.
Не нужно нам javascript. Boostrap modal добавляет .in класс, когда он появляется. Просто измените эту комбинацию классов с modalclassName.fade.in с помощью flex css и вы закончите.
добавьте этот css в центр вашего модального вертикально и горизонтально.
.modal.fade.in {
display: flex !important;
justify-content: center;
align-items: center;
}
.modal.fade.in .modal-dialog {
width: 100%;
}
Лучшее решение для централизации вашего модального с шириной и высотой - в css add и в модальном добавить это "централизовать" как класс.
.centralize{
position:absolute;
left:50%;
top:50%;
background-color:#fff;
transform: translate(-50%, -50%);
width: 40%; //specify watever u want
height: 50%;
}
.modal.in .modal-dialog {
position: relative;
top: 50%;
transform: translateY(-50%);
}через 4 часа я нашел решение. Для центра модальных в разных разрешениях (рабочий стол, планшеты, смартфоны):
index.php
<! - Bootstrap core CSS ->
<link href=".../css/bootstrap-modal-bs3patch.css" rel="stylesheet">
<link href=".../css/bootstrap-modal.css" rel="stylesheet">
Файл bootstrap-modal-bs3patch.css Я загрузил его из https://github.com/jschr/bootstrap-modal
Затем я изменил этот файл. Css следующим образом:
body.modal-open,
. modal-open. navbar-fixed-top,
. modal-open. navbar-fixed-bottom {
margin-right: 0;
}
. {modal
padding: 0;
}
. modal.container {
max-width: none;
}
@ media (min-width: 768px) and (max-width: 992px) {
. {modal-dialog
background-color: black;
position: fixed;
top: 20%! important;
left: 15%! important;
}
}
@ media (min-width: 992px) and (max-width: 1300px) {
. {modal-dialog
background-color: red;
position: fixed;
top: 20%! important;
left: 20%! important;
}
}
@ media (min-width: 1300px) {
. {modal-dialog
background-color: # 6e7ec3;
position: fixed;
top: 40%! important;
left: 35%! important;
}
}
Я тестировал разные разрешения и работал!