Bootstrap 3模态垂直位置中心
这是一个两部分问题：
-
当你不知道模态的确切高度时，如何将模态垂直定位在中心？
-
是否有可能以模态为中心，溢出：自动在模态体，但只有当模态超过屏幕高度？
我试过使用这个：
.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以上编辑）;
我的解决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; }
对话框开始居中，在大内容的情况下，它只是垂直增长，直到滚动条出现。
这是一个工作小提琴为您的快乐！
考虑使用这里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">×</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">×</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>
