垂直居中的 Bootstrap 模态窗口

我想在 viewport (中间)我试图添加一些 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);
}
})
288310 次浏览
小开

中重写 top 参数。In 要强制在自定义声明中设置值，请在 top 后面添加 !important关键字。这将强制浏览器使用该值并忽略关键字的任何其他值。这样做的缺点是无法在其他任何地方重写该值。

.modal {
position: fixed;
top: 50% !important;
left: 50%;
}
小开

这就是我的应用程序。如果您在 bootstrap.css 文件中查看以下类。Modal- 对话框的默认填充为10px 和@media screen，并且(最小宽度: 768px)。Modal- 对话框的顶部填充设置为30px。因此，在我的自定义 css 文件中，我将所有屏幕的顶部填充设置为15% ，而没有指定媒体屏幕宽度。希望这个能帮上忙。

.modal-dialog {
padding-top: 15%;
}
小开

四个小时后，我找到了解决办法。 在不同的分辨率(桌面、平板电脑、智能手机)中集中显示模式:

Index.php

<! - Bootstrap core CSS ->
     <link href=".../css/bootstrap-modal-bs3patch.css" rel="stylesheet">
     <link href=".../css/bootstrap-modal.css" rel="stylesheet">

我从 https://github.com/jschr/bootstrap-modal下载的文件 Bootstrap-mode-bs3patch. css

然后我修改了这个文件。 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;
}
}

我测试了不同的分辨率和 很管用！

小开

这在 BS3中可以工作，在 v2中不能测试。它使模态垂直居中。请注意，它将过渡到那里-如果你想它只是出现在位置编辑为 .modal-dialog的 CSS transition属性

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

你可以在 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 类添加到“ mode-Dialogue”容器中

<div class="modal-dialog modal-vertical-centered">
...

JsFiddle 工作示例: http://jsfiddle.net/U4NRx/

小开

因为 gpcola 的答案对我不起作用，所以我稍微编辑了一下，让它现在起作用了。 我使用了“边缘顶部”而不是转换。此外，我使用“显示”而不是“显示”事件，因为它给了我一个非常糟糕的定位跳转(可见当你有引导动画)。确保在定位之前将显示设置为“ block”，否则 $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's 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));
小开 
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's 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);
});
小开

使模态垂直对齐中间所有对话框。

/* 注:

1.即使你不需要分配选择器，它会从文档中找到所有的模态，并使其垂直中间

为了避免中间出现一些特定的模态，你可以使用: 在点击事件中不使用选择器

*/

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

来自米兰 · 潘迪亚

小开 
<!-- 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">&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>
</div>

//样式

.table {
display: table;
height:100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
小开

为了在 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});
小开

这个就行了: http://jsfiddle.net/sRmLV/1140/

它使用一个 helper-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">&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>

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

我为所有 HTML5浏览器找到的最佳方法:

body.modal-open .modal {
display: flex !important;
height: 100%;
}


body.modal-open .modal .modal-dialog {
margin: auto;
}
小开

我的选择，只是一个小 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-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

需要进一步完善。

小开

只需添加下面的 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));
小开

最干净和最简单的方法是使用 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 非常棒，如果可以的话你应该开始使用它。

附注: 这个网站真的帮助我掌握了 Flexbox 作为一个整体，并应用到任何用例: http://flexboxfroggy.com/

编辑: 在一个页面上有两个模态符号的情况下，这应该适用于. modal.In

小开

对于那些使用 angle-ui 引导程序的用户，可以根据以上信息添加以下类:

注意: 没有其他变化是必要的，它应解决所有模态。

// 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 解决方案。此外，这并不妨碍通过单击对话框外部来关闭对话框。

Http://plnkr.co/edit/jcgvzq?p=preview

添加一些 CSS 类到 DIV 容器中。模态对话框类比引导 CSS 获得更高的特异性，例如。集中注意力。

超文本标示语言

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

并使这个。模态对话框。中心容器固定和正确定位。

CSS

.modal .modal-dialog.centered {
position: fixed;
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
}

或者更简单的使用弹性盒。

CSS

.modal {
display: flex;
align-items: center;
justify-content: center;
}
小开

使用这个简单的脚本，中心的情态动词。

如果需要，可以设置自定义类(例如: 。用 modal.mode-vcenter 代替。模态) ，将功能限制为某些模态。

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

你可使用:

.modal {
position: fixed;
top: 50% !important;
left: 50%;
transform: translate(-50%, -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 总是在模态上应用一个 style 属性，就在它开始显示的时候，所以这有点儿古怪，但是它是有效的。

:not([style='display: none;'])部分是一个解决方案，用于在关闭对话框时引导程序不正确地删除样式属性，而是将样式显示设置为无。

小开

这个问题的另一个 CSS 答案是..。
这个解决方案只使用 CSS 来达到预期的效果，同时仍然保持通过单击模式外部来关闭模式的能力。它还允许您设置 .modal-content的高度和宽度最大值，以便您的弹出窗口不会超出视图。当内容超过模态大小时，将自动出现滚动条。

注:
Bootstrap 推荐的 .modal-dialog div应该被省略，以便这个工作正常(似乎没有打破任何东西)。在 Chrome51和 IE11中测试。

CSS 代码:

.modal {
height: 100%;
width: 100%;
}


.modal-content {
margin: 0 auto;
max-height: 600px;
max-width: 50%;
overflow: auto;
transform: translateY(-50%);
}

编辑: .modal-dialog类允许您选择用户是否可以通过单击模态本身外部来关闭模态。大多数情态动词都有一个明确的“关闭”或“取消”按钮。在使用此变通方法时请记住这一点。

小开

优点:

  • 模式内容即使比设备高也可以访问
  • 不使用 display:table-cell(这不是用于布局)
  • 不需要对默认 Bootstrap 3模式 markup进行任何修改
  • 定位是纯 CSS。添加 JS 是为了在点击下面和上面关闭模式
  • 我为那些使用 gulp或 grunt的人包括了无前缀的 SCSS

// 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">&times;</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>

注意 : 我打算使用 Bootstrap 3的最新规格来更新这个答案。有关 Bootstrap 4解决方案，请参见 这个答案(目前它们大致相同，但随着时间的推移可能会发生分歧)。如果您发现任何错误或问题，让我知道，我会更新。谢谢。

清洁、无前缀的 SCSS(与 gulp/grunt一起使用) :

.modal-dialog {
display: flex;
flex-direction: column;
justify-content: center;
overflow-y: auto;
min-height: calc(100vh - 60px);
@media (max-width: 767px) {
min-height: calc(100vh - 20px);
}
}
小开

不需要我们的 javascript。 Boostrap 模态添加。在类时，它出现。 只要用 flex css modalclassname.fade.in 修改这个类组合，你就完成了。

添加这个 css 来使您的模式垂直和水平居中。

.modal.fade.in {
display: flex !important;
justify-content: center;
align-items: center;
}
.modal.fade.in .modal-dialog {
width: 100%;
}
小开

最好的解决方案集中您的宽度和高度模态是，在 css 添加和在模态添加这个“集中”作为一个类。.

.centralize{
position:absolute;
left:50%;
top:50%;


background-color:#fff;
transform: translate(-50%, -50%);
width: 40%; //specify watever u want
height: 50%;
}
小开

这对我来说非常有效:

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

完整的 演示 URL: https://codepen.io/dimbslmh/full/mKfCc

小开 

.modal.in .modal-dialog {
position: relative;
top: 50%;
transform: translateY(-50%);
}

小开

从 Bootstrap 4开始，添加了以下类，以便在不使用 JavaScript 的情况下实现这一点。

modal-dialog-centered

您可以找到他们的文档 给你。

感谢 v.d 指出，您需要添加两个。模态-对话框居中的。模态-对话框垂直居中的模态。

小开

垂直中心 将以模态对话框为中心的。模态对话框添加到以模态对话框为中心的垂直位置

启动演示模式 

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

只要忽略所有的 Upper 方法，就可以在 Bootstrap 版本4和5中使用。

OpenModal (模板: TemplateRef){ Show (template，{ class: ‘ modalsm modalService.show’) ; }

小开

我的引导模式是在屏幕中心

<div id="partialModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document" style="width:80%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);">
<div class="modal-content" style="padding: 20px; background-color: lightskyblue; border-radius: 20px;">
<div class="modal-header">
<h3 class="modal-title">Customer Details Form</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" style="overflow:auto;">


</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

提交答案