Bootstrap 3模态垂直位置中心

Question

这是一个两部分问题：

当您不知道模态的确切高度时，如何将模态垂直放置在中心？
是否有可能让模态居中并且在模态体中有溢出：auto，但仅当模态超过屏幕高度时？

我试过用这个：

.modal-dialog {
  height: 80% !important;
  padding-top:10%;
}

.modal-content {
  height: 100% !important;
  overflow:visible;
}

.modal-body {
  height: 80%;
  overflow: auto;
}

当内容比垂直屏幕尺寸大得多时，这给了我所需的结果，但对于小模态内容，它几乎无法使用。

Answer 1

.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类，以确保它出现在窗口的顶部边框之外，而不是中心

Answer 2

使用css有一种最简单的方法：

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

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

但是：Kua zxsw指出

Answer 3

我写的最通用的解决方案。使用对话框高度动态计算。（下一步可能是在窗口调整大小时重新计算对话框的高度。）

的jsfiddle：https://jsfiddle.net/darioferrer/0ueu4dmy/

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

Answer 4

找到了// 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', ''); } }); });的完美解决方案

here

Answer 5

添加这个简单的CSS也有效。

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

Answer 6

.modal-dialog {
  height: 100vh !important;
  display: flex;
}

.modal-content {
  margin: auto !important;
  height: fit-content !important;
}

Answer 7

我从bellow链接下载了bootstrap3-dialog并修改了bootstrap-dialog.js中的open函数

$('#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 } });

码

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

CSS

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

Answer 8

这是另一种仅适用于css的方法，它基于此：.centerModal .modal-header{ text-align:left; } .centerModal .modal-body{ text-align:left; }

青菜：

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Answer 9

这对我有用：

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

Answer 10

尝试这样的事情：

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

Answer 11

您可能想要查看这个方法集合，以便将div绝对居中：.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 }

Answer 12

1.当您不知道模态的确切高度时，如何将模态垂直放置在中心？

要在不声明高度的情况下绝对居中Bootstrap 3 Modal，首先需要通过将其添加到样式表来覆盖Bootstrap CSS：

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

这会将模态对话框的左上角定位在窗口的中心。

我们必须添加此媒体查询，否则模式margin-left在小型设备上是错误的：

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

Update (01/10/2015):

添加Finik's answer。积分兑换Centering in the Unknown。

.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.是否可以使模态居中并且在模态体中具有溢出：自动，但仅当模态超过屏幕高度时？

这可以通过给模态体提供overflow-y：auto和max-height来实现。这需要更多的工作才能使其正常工作。首先将其添加到样式表中：

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

我们将再次使用jQuery来获取窗口高度并首先设置模态内容的最大高度。然后我们必须通过使用modal-header和modal-footer减去模态内容来设置模态体的最大高度：

$('.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的工作演示：http://cdpn.io/GwvrJ编辑：我建议使用更新版本来获得更具响应性的解决方案：http://cdpn.io/mKfCc

Update (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'));
  }
});

（更新时间：2015年3月31日http://cdpn.io/mKfCc以上编辑）

Answer 13

一个简单的方法。为我工作。谢谢rensdenobel :) http://codepen.io/shshaw/full/gEiDt

http://jsfiddle.net/rensdenobel/sRmLV/13/

Answer 14

另一个解决方案将为<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 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" 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>事件和window.resize上的每个可见模态设置有效位置：

show.bs.modal

Answer 15

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

Answer 16

我知道这有点晚了，但我正在添加一个新的答案，以便它不会在人群中迷失。它是一个跨桌面移动浏览器解决方案，可以在任何地方正常运行。

它只需要将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);包装在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; }

Answer 17

考虑使用这里找到的bootstrap-modal插件 - https://jsfiddle.net/v6u82mvu/1/

该插件将以您的所有模态为中心

Answer 18

对于居中，我不知道过于复杂的解决方案。 bootstrap已经为你水平居中，所以你不需要弄乱它。我的解决方案只是使用jQuery设置一个上边距。

https://github.com/jschr/bootstrap-modal

我使用了loaded.bs.modal事件，因为我正在远程加载内容，并且使用shown.ba.modal事件导致高度计算不正确。当然，如果您需要响应窗口，您可以添加一个事件来调整窗口大小。

Answer 19

非常简单的方法来实现这个概念，你将得到模态总是在你的屏幕的模块由css作为fllow：$('#myModal').on('loaded.bs.modal', function() { $(this).find('.modal-dialog').css({ 'margin-top': function () { return (($(window).outerHeight() / 2) - ($(this).outerHeight() / 2)); } }); });

你必须通过以下css将http://jsfiddle.net/jy0zc2jc/1/类显示为表：

modal

和display:table作为modal-dialog

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

Answer 20

它并不复杂。

请试试这个：

display:table-cell

Answer 21

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

如果需要，可以设置自定义类（例如：.modal.modal-vcenter而不是.modal）以仅将功能限制为某些模态。

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

还为模态的水平间距添加此CSS修复;我们在模态上显示滚动，主体滚动由Bootstrap自动隐藏：

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

Answer 22

在移动设备中，它可能看起来有点不同，这是我的代码。

/* scroll fixes */
.modal-open .modal {
    padding-left: 0px !important;
    padding-right: 0px !important;
    overflow-y: scroll;
}

Answer 23

我的解决方案

.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("~/Content/images/progress-loader.gif")" alt="progress"/>
                    </p>   
                </div>
            </div>
        </div>
    </div>

Answer 24

将模态中心设置为屏幕

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

Answer 25

它可以简单地用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);
}

Answer 26

我想出了一个纯粹的CSS解决方案！这是css3虽然，这意味着ie8或更低版本不受支持，但除此之外，它已经过ios，android，ie9 +，chrome，firefox，桌面游戏等测试和工作。

我使用以下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

..选择这个作为正确的答案，因为没有额外的重javascript，如果有多个模态，浏览器就会瘫痪。

Answer 27

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

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

.modal-content {
  margin: 0 auto;
}

Answer 28

我的解决方案

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

Answer 29

在我的例子中，我所做的就是在知道模态高度的情况下设置我的CSS中的Top

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

在我的CSS我设置

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

Answer 30

扩展@Finik的优秀答案，此修复程序仅适用于非移动设备。我在IE8，Chrome和Firefox 22中进行了测试 - 它适用于很长或很短的内容。

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

Bootstrap 3模态垂直位置中心

问题描述投票：250回答：35

35个回答

Update (01/10/2015):

Update (30/11/2015):

最新问题

Bootstrap 3模态垂直位置中心

问题描述 投票：250回答：35

35个回答

Update (01/10/2015):

Update (30/11/2015):

最新问题

问题描述投票：250回答：35