垂直居中Bootstrap模态窗口
我想中心我的模式在视口（中）我试图添加一些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/
它使用了一个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">×</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的答案不适合我，所以我现在编辑了一下它的作品。 我使用“边缘顶”而不是变形。 另外，我使用“显示”而不是“显示”事件，因为它给了我一个非常糟糕的跳转定位（当你有引导animation时可见）。 定位前务必将显示屏设置为“阻止”，否则$ 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));
这是我为我的应用程序做的。 如果你看看bootstrap.css文件中的下列类，modal-dialog的默认填充是10px，而@media screen和（min-width：768px）.modal-dialog的顶部填充设置为30px。 所以在我的自定义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; }
您必须使用[样式]select器，才能将样式应用于当前活动的模式，而不是所有的模态。 .in会很好，但是只有在转换完成之后才会添加，这太迟了，导致了一些非常糟糕的转换。 幸运的是，bootstrap总是在模态上应用一个style属性，就像它开始显示的一样，所以这有点不好意思，但是它起作用。
:not([style='display: none;'])部分是一个解决方法，不能正确删除样式属性，而是在closures对话框时将样式显示设置为none。
您可以在Bootstrap 3模式上实现垂直alignment中心：
.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！ 以下内容将垂直alignment屏幕中央的Bootstrap 3模式，并且比这里发布的所有其他解决scheme更加简洁：
body.modal-open .modal.in { display: flex !important; align-items: center; }
注意：尽pipe这是最简单的解决scheme，但由于浏览器支持，它可能不适用于所有人： http : //caniuse.com/#feat=flexbox
它看起来像（通常）IE落后。 就我而言，我为自己或客户开发的所有产品都是IE10 +。 （当开发时间支持老版本的IE，当它可以用于实际开发产品并使MVP更快地出来时，这是没有意义的。 这当然不是每个人都有的奢侈品。
我曾经看过较大的站点检测flexbox是否受支持，并将一个类应用到页面主体 – 但是前端工程的级别非常强大，而且您仍然需要回退。
我会鼓励人们拥抱networking的未来。 Flexbox真棒，你应该开始使用它，如果可以的话。
聚苯乙烯 – 这个网站真的帮助我把握flexbox作为一个整体，并将其应用于任何用例： http ://flexboxfroggy.com/
编辑：在一个页面上的两个模态的情况下，这应该适用于.modal.in
这完全适用于我：
.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 { position: fixed; top: 50% !important; left: 50%; transform: translate(-50%, -50%); }
将其垂直和水平居中。
又一个CSS解决scheme。 不适用于大于视图端口的popup窗口。
.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类中，将该位置覆盖绝对（从相对）并将内容居中.modal-dialog right:0, left: 0
在.modal.fade .modal-dialog , .modal.in .modal-dialog在top而不是在翻译上设置过渡animation。
在popup窗口小的情况下， margin-top会将popup窗口略微移动到中心以下，如果是长popup窗口，模块将会被locking。 因此， 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; }
我的select，只是一个小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添加到现有的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));
我认为这是一个比Rens de Nobel的解决scheme更纯净的纯CSS解决scheme。 另外，这并不妨碍通过单击外部closures对话框。
http://plnkr.co/edit/JCGVZQ?p=preview
只需在.modal-dialog类中添加一些CSS类到DIV容器，以获得比引导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，未在V2中进行testing。 它垂直居中模式。 请注意，它将在那里转换 – 如果您希望它只出现在位置编辑.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); });
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); });
使“模态”alignment。
/* 注意：
即使你不需要分配select器，它也可以从文档中find所有模式，并使其垂直居中
2.为了避免中间某些特定的模式为中心，您可以使用：不是单击事件中的select器
* /
$( "[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); });
从米兰pandas
为了将竖直模态居中添加到引导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（这不是用于布局） - 不需要对默认Bootstrap 3模式
markup进行任何修改 - 定位是纯粹的CSS。 JS被添加用于closures点击/点击下方和上方的模式
- 我将那些使用
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="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="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>
使用这个以模态为中心的简单脚本。
如果你想要的话，你可以设置一个自定义的类（例如：.modal.modal-vcenter而不是.modal），以便将function限制在某些模式中。
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回答这个问题…
这个解决scheme只使用CSS来达到预期的效果，同时仍然保持通过点击外部模式closures模式的能力。 它还允许您设置.modal-content高度和宽度最大值，以便您的popup窗口不会超出视口。 当内容超出模式大小时，滚动将自动出现。
注意：
Bootstrapbuild议.modal-dialog div应该被省略，以便这个工作正常（似乎不会破坏任何东西）。 在Chrome 51和IE 11中testing
CSS代码：
.modal { height: 100%; width: 100%; } .modal-content { margin: 0 auto; max-height: 600px; max-width: 50%; overflow: auto; transform: translateY(-50%); }
编辑： .modal-dialog类允许您select是否用户可以通过单击外部的模式本身closures模式。 大多数模态都有明确的“closures”或“取消”button。 在使用此解决方法时请记住这一点。
不需要我们的JavaScript。 当Boostrap模式出现时，它会添加.in类。 只需使用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%; }
集中你的模式与宽度和高度的最佳解决scheme是，在CSS添加和模态添加这个“集中”作为一个类..
.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个小时后，我find了解决scheme。 以不同分辨率（桌面，平板电脑，智能手机）为中心模式：
的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; } }
我做了不同的分辨率testing， 它的工作原理 ！
