Bootstrap 3模态垂直位置中心

这是一个两部分问题:

  1. 当你不知道模态的确切高度时,如何将模态垂直定位在中心?

  2. 是否有可能以模态为中心,溢出:自动在模态体,但只有当模态超过屏幕高度?

我试过使用这个:

.modal-dialog { height: 80% !important; padding-top:10%; } .modal-content { height: 100% !important; overflow:visible; } .modal-body { height: 80%; overflow: auto; } 

当内容比垂直屏幕尺寸大得多时,这给了我所需要的结果,但是对于小模式内容,它几乎不可用。

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

并调整一下.fade类,以确保它出现在窗口的上边界,而不是中心

1.如果不知道模态的确切高度,如何将模态垂直定位在中心?

要将Bootstrap 3 Modal绝对居中放置而不声明高度,首先需要将Bootstrap CSS添加到样式表中:

 .modal-dialog-center { /* Edited classname 10/03/2014 */ margin: 0; position: absolute; top: 50%; left: 50%; } 

这将把模式对话框的左上angular定位在窗口的中央。

我们必须添加这个媒体查询,否则小设备上的模式余量是错误的:

 @media (max-width: 767px) { .modal-dialog-center { /* Edited classname 10/03/2014 */ width: 100%; } } 

现在我们需要用JavaScript来调整自己的位置。 要做到这一点,我们给元素一个负的顶部和左边界等于其高度和宽度的一半。 在这个例子中,我们将使用jQuery,因为它可用于Bootstrap。

 $('.modal').on('shown.bs.modal', function() { $(this).find('.modal-dialog').css({ 'margin-top': function () { return -($(this).outerHeight() / 2); }, 'margin-left': function () { return -($(this).outerWidth() / 2); } }); }); 

更新(01/10/2015):

添加Finik的答案 。 以未知为中心的信用。

 .modal { text-align: center; padding: 0!important; } .modal:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -4px; /* Adjusts for spacing */ } .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; } 

注意消极的保证金吧? 这删除了内嵌块添加的空间。 该空间导致模式跳转到页面底部@media width <768px。

2.是否有可能以模态为中心,溢出:自动在模态体,但只有当模态超过屏幕高度?

这是可能的通过给模式身体溢出:自动和最大高度。 这需要更多的工作才能正常工作。 从添加到你的样式表开始:

 .modal-body { overflow-y: auto; } .modal-footer { margin-top: 0; } 

我们将再次使用jQuery获取窗口高度,并首先设置模态内容的最大高度。 然后我们必须设置模态体的最大高度,用模态头和模态步长减去模态内容:

 $('.modal').on('shown.bs.modal', function() { var contentHeight = $(window).height() - 60; var headerHeight = $(this).find('.modal-header').outerHeight() || 2; var footerHeight = $(this).find('.modal-footer').outerHeight() || 2; $(this).find('.modal-content').css({ 'max-height': function () { return contentHeight; } }); $(this).find('.modal-body').css({ 'max-height': function () { return (contentHeight - (headerHeight + footerHeight)); } }); $(this).find('.modal-dialog').css({ 'margin-top': function () { return -($(this).outerHeight() / 2); }, 'margin-left': function () { return -($(this).outerWidth() / 2); } }); }); 

你可以用Bootstrap 3.0.3在这里find一个工作演示: http : //cdpn.io/GwvrJ编辑:我build议使用更新的版本,而不是一个更响应的解决scheme: http : //cdpn.io/mKfCc

更新(30/11/2015):

 function setModalMaxHeight(element) { this.$element = $(element); this.$content = this.$element.find('.modal-content'); var borderWidth = this.$content.outerHeight() - this.$content.innerHeight(); var dialogMargin = $(window).width() < 768 ? 20 : 60; var contentHeight = $(window).height() - (dialogMargin + borderWidth); var headerHeight = this.$element.find('.modal-header').outerHeight() || 0; var footerHeight = this.$element.find('.modal-footer').outerHeight() || 0; var maxHeight = contentHeight - (headerHeight + footerHeight); this.$content.css({ 'overflow': 'hidden' }); this.$element .find('.modal-body').css({ 'max-height': maxHeight, 'overflow-y': 'auto' }); } $('.modal').on('show.bs.modal', function() { $(this).show(); setModalMaxHeight(this); }); $(window).resize(function() { if ($('.modal.in').length != 0) { setModalMaxHeight($('.modal.in')); } }); 

(更新30/11/2015 http://cdpn.io/mKfCc以上编辑&#xFF09;

我的解决scheme

 .modal-dialog-center { margin-top: 25%; } <div id="waitForm" class="modal"> <div class="modal-dialog modal-dialog-center"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 id="headerBlock" class="modal-title"></h4> </div> <div class="modal-body"> <span id="bodyBlock"></span> <br/> <p style="text-align: center"> <img src="@Url.Content("~/Contenthttp://img.dovov.comprogress-loader.gif")" alt="progress"/> </p> </div> </div> </div> </div> 

它可以简单地用display: flex来固定

 .modal-dialog { margin-top: 0; margin-bottom: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; } .modal.fade .modal-dialog { transform: translate(0, -100%); } .modal.in .modal-dialog { transform: translate(0, 0); } 

带前缀

 .modal-dialog { margin-top: 0; margin-bottom: 0; height: 100vh; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .modal.fade .modal-dialog { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } .modal.in .modal-dialog { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 

如果您使用flexbox没问题,那么这应该有助于解决这个问题。

 .modal-dialog { height: 100%; width: 100%; display: flex; align-items: center; } .modal-content { margin: 0 auto; } 

我想出了一个纯粹的CSS解决scheme! 这是css3虽然,这意味着ie8或更低不支持,但除此之外,它已经过testing和工作在ios,android,ie9 +,铬,火狐,桌面Safari浏览器。

我正在使用下面的CSS:

 .modal-dialog { position:absolute; top:50% !important; transform: translate(0, -50%) !important; -ms-transform: translate(0, -50%) !important; -webkit-transform: translate(0, -50%) !important; margin:auto 5%; width:90%; height:80%; } .modal-content { min-height:100%; position:absolute; top:0; bottom:0; left:0; right:0; } .modal-body { position:absolute; top:45px; // height of header bottom:45px; // height of footer left:0; right:0; overflow-y:auto; } .modal-footer { position:absolute; bottom:0; left:0; right:0; } 

这是一个小提琴。 http://codepen.io/anon/pen/Hiskj

select这个作为正确的答案,因为没有额外的重型JavaScript,使浏览器在不止一个模式的情况下屈服。

我所做的就是在我的CSS中设置Top,以知道模态的高度

<div id="myModal" class="modal fade"> ... </div>

在我的CSS我设置

 #myModal{ height: 400px; top: calc(50% - 200px) !important; } 

有一个最简单的方法来做到这一点使用CSS:

 .modal-dialog { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width:500px; height:300px; } 

而已。 请注意,它只需要应用于.modal-dialog容器div。

演示: https : //jsfiddle.net/darioferrer/0ueu4dmy/

我写的最普遍的解决scheme。 dynamic计算对话框高度。 (下一步可能是重新计算窗口大小对话框的高度。)

JSfiddle: http : //jsfiddle.net/8Fvg9/3/

 // initialise on document ready jQuery(document).ready(function ($) { 'use strict'; // CENTERED MODALS // phase one - store every dialog's height $('.modal').each(function () { var t = $(this), d = t.find('.modal-dialog'), fadeClass = (t.is('.fade') ? 'fade' : ''); // render dialog t.removeClass('fade') .addClass('invisible') .css('display', 'block'); // read and store dialog height d.data('height', d.height()); // hide dialog again t.css('display', '') .removeClass('invisible') .addClass(fadeClass); }); // phase two - set margin-top on every dialog show $('.modal').on('show.bs.modal', function () { var t = $(this), d = t.find('.modal-dialog'), dh = d.data('height'), w = $(window).width(), h = $(window).height(); // if it is desktop & dialog is lower than viewport // (set your own values) if (w > 380 && (dh + 60) < h) { d.css('margin-top', Math.round(0.96 * (h - dh) / 2)); } else { d.css('margin-top', ''); } }); }); 

扩展@ Finik的出色答案,此修补程序仅适用于非移动设备。 我在IE8,Chrome和Firefox 22上进行了testing,内容非常长或很短。

 .modal { text-align: center; } @media screen and (min-device-width: 768px) { .modal:before { display: inline-block; vertical-align: middle; content: " "; height: 100%; } } .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; } 

从这里find完美的解决scheme

 $(function() { function reposition() { var modal = $(this), dialog = modal.find('.modal-dialog'); modal.css('display', 'block'); // Dividing by two centers the modal exactly, but dividing by three // or four works better for larger screens. dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2)); } // Reposition when a modal is shown $('.modal').on('show.bs.modal', reposition); // Reposition when the window is resized $(window).on('resize', function() { $('.modal:visible').each(reposition); }); }); 

尝试这样的事情:

 .popup__overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999; text-align: center } .popup { display: inline-block; vertical-align: middle } 
 $('#myModal').on('shown.bs.modal', function() { var initModalHeight = $('#modal-dialog').outerHeight(); //give an id to .mobile-dialog var userScreenHeight = $(document).outerHeight(); if (initModalHeight > userScreenHeight) { $('#modal-dialog').css('overflow', 'auto'); //set to overflow if no fit } else { $('#modal-dialog').css('margin-top', (userScreenHeight / 2) - (initModalHeight/2)); //center it if it does fit } }); 

我从bellow链接下载了bootstrap3对话框,并在bootstrap-dialog.js中修改了open函数

https://github.com/nakupanda/bootstrap3-dialog

 open: function () { !this.isRealized() && this.realize(); this.updateClosable(); //Custom To Vertically centering Bootstrap var $mymodal = this.getModal(); $mymodal = $mymodal.append('<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td align="center" valign="middle" class="centerModal"></td></tr></table>'); $mymodal = $mymodal.find(".modal-dialog").appendTo($mymodal.find(".centerModal")); //END this.getModal().modal('show'); return this; } 

CSS

 .centerModal .modal-header{ text-align:left; } .centerModal .modal-body{ text-align:left; } 

这里有一个其他的CSS方法,工作得很好,并基于这个:http: //zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

青菜:

 .modal { height: 100%; .modal-dialog { top: 50% !important; margin-top:0; margin-bottom:0; } //keep proper transitions on fade in &.fade .modal-dialog { transform: translateY(-100%) !important; } &.in .modal-dialog { transform: translateY(-50%) !important; } } 

你可能想看看这个绝对集中div的方法集合: http : //codepen.io/shshaw/full/gEiDt

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

我知道这有点晚了,但我增加了一个新的答案,以便它不会在人群中迷路。 这是一个跨桌面移动浏览器的解决scheme,它可以正常工作。

它只需要将modal-dialog包装在modal-dialog-wrap类中,并需要添加以下代码:

 .modal-dialog-wrap { display: table; table-layout: fixed; width: 100%; height: 100%; } .modal-dialog { display: table-cell; vertical-align: middle; text-align: center; } .modal-content { display: inline-block; text-align: left; } 

对话框开始居中,在大内容的情况下,它只是垂直增长,直到滚动条出现。

这是一个工作小提琴为您的快乐!

https://jsfiddle.net/v6u82mvu/1/

考虑使用这里find的bootstrap-modal插件 – https://github.com/jschr/bootstrap-modal

该插件将集中所有你的模式

对于中心来说,我不明白那些过于复杂的解决scheme。 引导程序已经为你水平居中,所以你不需要搞砸了。 我的解决scheme是只使用jQuery设置顶部边距。

 $('#myModal').on('loaded.bs.modal', function() { $(this).find('.modal-dialog').css({ 'margin-top': function () { return (($(window).outerHeight() / 2) - ($(this).outerHeight() / 2)); } }); }); 

我已经使用loaded.bs.modal事件,因为我正在远程加载内容,并使用shown.ba.modal事件导致高度计算不正确。 如果你需要的话,你可以添加一个事件来调整窗口大小。

非常非常简单的方法来实现这个概念,你会得到模态总是在您的屏幕的模式由CSS为fllow: http : //jsfiddle.net/jy0zc2jc/1/

你必须通过下面的CSS来将modal类显示为表格:

 display:table 

modal-dialog作为display:table-cell

在给定的小提琴中看到完整的工作示例

这并不复杂。

请试试这个:

 $(document).ready(function(){ var modalId = "#myModal"; resize: function(){ var new_margin = Math.ceil(($(window).height() - $(modalId).find('.modal-dialog').height()) / 2); $(modalId).find('.modal-dialog').css('margin-top', new_margin + 'px'); } $(window).resize(function(){ resize(); }); $(modalId).on('shown.bs.modal', function(){ resize(); }); }); 

一个简单的方法。 为我工作。 Thks rensdenobel 🙂 http://jsfiddle.net/rensdenobel/sRmLV/13/

 <style> .vertical-alignment-helper { display:table; height: 100%; width: 100%; } .vertical-align-center { /* To center vertically */ display: table-cell; vertical-align: middle; } .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; } </style> <!-- Button trigger modal --> <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> 

使用这个以模态为中心的简单脚本。

如果你想要的话,你可以设置一个自定义的类(例如:.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; } 

另一个解决scheme将为window.resize事件和show.bs.modal上的每个可见模态设置一个有效的位置:

 (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); 

在移动工厂,它可能看起来有点不同,这是我的代码。

 <div class="modal-container"> <style> .modal-dialog{ margin-top: 60%; width:80%; margin-left: 10%; margin-right: 10%; margin-bottom: 100% } @media screen and (orientation:landscape){ .modal-dialog{ margin-top: 70; width:80%; margin-left: 10%; margin-right: 10%; margin-bottom: 100% } } .modal-body{ text-align: center; } .modal-body p{ margin:14px 0px; font-size: 110%; } .modal-content{ border-radius: 10px; } .modal-footer{ padding:0px; } .modal-footer a{ padding: 15px; } .modal-footer a:nth-child(1){ border-radius: 0px 0px 0px 10px; } .modal-footer a:nth-child(2){ border-radius: 0px 0px 10px 0px; } </style> <h2>Basic Modal Example</h2> <div data-toggle="modal" data-target="#myModal">Div for modal</div> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <p>确定要取消本次订单嘛?</p> </div> <div class="modal-footer"> <div class="btn-group btn-group-justified"> <a href="#" class="btn btn-default" data-dismiss="modal">取消</a> <a href="#" class="btn btn-default" data-dismiss="modal">确定</a> </div> </div> </div> </div> </div> </div> 

这适用于我:

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

我的解决scheme

 .modal.in .modal-dialog { -webkit-transform: translate(0, calc(50vh - 50%)); -ms-transform: translate(0, 50vh) translate(0, -50%); -o-transform: translate(0, calc(50vh - 50%)); transform: translate(0, 50vh) translate(0, -50%); } 

表格样式

 <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <table height="100%" width="100%"> <tr><td valign="middle"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</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> </td></tr> </table> </div>