Bootstrap 3模态垂直位置中心


270

这是一个两部分的问题:

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

  2. 仅在模态超过屏幕高度的情况下,模态才能居中并在模型主体中具有overflow:auto吗?

我试过使用这个:

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

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

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

当内容远大于垂直屏幕大小时,这给了我所需的结果,但是对于较小的模态内容却几乎无法使用。


1
@Heiken由于某种原因,这使我在屏幕上跳了下来,即时通讯使用了镀铬
Sven van den Boogaart

Answers:


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


我实际上是错误地覆盖了此内容,感谢您指出它实际上在幕后起作用。
多里安

这可能是垂直放置中心的最佳方法,不仅是引导程序模态,还包括其他所有内容。css-tricks.com/centering-in-the-unknown
Mark S

4
我澄清说这在Mobile上效果不佳。因为定义“:after”的高度为100%,并且可以将模式自动下移到页面的下方。我刚刚解决了声明.modal {display:flex!重要;} .modal-dialog {margin:auto}。92.97%的人已经支持使用此CSS属性,但是对于一般支持者,可以使用JavaScript设置边距。
Walter Chapilliquen-wZVGG 2015年

21
绝对不错,但我建议您仅在768px以上使用它,并在移动设备上保留默认设置。当屏幕高度较小时,顶部位置最适合模态。我还调整了动画使其从中心出现,如果有人需要,这里是工作示例:codepen.io/anon/pen/zGBpNq
bwitkowicz

此解决方案将模式窗口向右移动2px,原因是:before元素。但这可以通过添加以下代码来解决::after
Cypher

146

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

要使Bootstrap 3 Modal绝对居中而不声明高度,您首先需要通过将Bootstrap 3 Modal添加到样式表中来覆盖Bootstrap CSS:

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

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

我们必须添加此媒体查询,否则在小型设备上,模式左边距错误:

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

现在,我们需要使用JavaScript调整其位置。为此,我们给该元素一个负的顶部和左侧边距,等于其高度和宽度的一半。在本示例中,我们将使用jQuery,因为Bootstrap中提供了jQuery。

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

更新(2015年1月10日):

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

注意负边距吗?这将删除inline-block添加的空间。该空间导致模式跳转到页面底部@media width <768px。

2.是否可以使模态居中并在模态主体中具有overflow:auto,但前提是模态超过屏幕高度?

这可以通过为模体提供溢出y:auto和最大高度来实现。要使其正常工作,这需要花费更多的工作。首先将其添加到样式表中:

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

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

$('.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

更新(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年11月30日http://cdpn.io/mKfCc更新)


1
优秀的答案和发布!但是,这也可以动画吗?当它弹出时,效果很好,但是动画效果如何?我在工作,无法测试atm,但我急切希望看到结果
scooterlord 2014年

您可以在模态上添加淡入淡出类。在cdpn.io/mKfCc上
dimbslmh 2014年

尽管它在Codepen上似乎工作得很好,但是我无法在我的项目中使用它。我猜您只需要添加代码,而不是替换某些内容吧?
scooterlord 2014年

1
又见面了!注意以下内容。当第一个模式第一次打开时,右边的边距是错误的,直到您调整一次大小。有任何想法吗?
scooterlord 2014年

1
@bernie我对Browserstack发截图与我codepen的一个分支,它具有短模式上的document.ready开放:browserstack.com/screenshots/... Browserstack不支持v9.3.x的截图(还),但我认为与您所描述的类似的事情发生在iOS 6.0上(请参见iPad 3rd(6.0)(纵向)屏幕截图)。可能是v9.3.2中返回的一个旧错误。如果您想,您可以在提交错误报告forums.developer.apple.com/community/safari-and-web/...
dimbslmh

37

我的解决方案

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

您应该使用padding-top。单击叠加层时,页边距将打破关闭操作
2014年

2
保证金最高设置为25%,则模态要求为50%高。
叛乱

28

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

2
这样可以防止由于高度为100vh而单击背景。适用于“背景:'静态'”设置。
ianstigator

这会导致动画问题淡出
Viswanath Lekshmanan

23

我想出了一个纯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会使浏览器屈服。


8
使用JavaScript的全部目的是获得模态的未知高度。您的解决方案具有80%的固定高度,它不能回答您自己的问题:“当您不知道模态的确切高度时,如何将模态垂直放置在中心?”
dimbslmh 2014年

...将高度尺寸设置为限制与屏幕高度相比的最大模态高度。但是,translate的百分比是根据CONTENT高度设置的。
scooterlord 2014年

3
如果您想获得不改变模态框尺寸的解决方案,请尝试以下CSS解决方案:tweaks.klickagent.ch/#30.05.2014_TwitterBootstrapCenterModal
klickagent.ch 2014年

很好。但是,它的方法与我描述的方法不同。在您的情况下,整个模态会上下移动,而在我的情况下,会创建一个溢出元素。很好!我喜欢!
scooterlord 2014年

这需要设置高度。这与用户要求的高度不完全相同。
叛乱

21

如果您可以使用flexbox,则可以解决问题。

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

.modal-content {
  margin: 0 auto;
}

7
我发现此答案对我非常有用。但是,如果要让用户通过单击模式的背景来关闭模式,请确保添加pointer-events: none.modal-dialogpointer-events: auto.modal-content。Becausu会.modal-dialog {height: 100%}覆盖模式上方和下方的整个列,并禁止用户单击该区域的背景。
wuct 2015年

从@ChingTingWu建议,最有效的结合

@ChingTingWu的建议在哪里?
giovannipds

1
ChingTingWu似乎已更改为@wuct
xiaolin

1
@giovannipds糟糕,我已重命名了用户名,因为它更短且更容易被标记。很抱歉造成混淆:)
2016年

20

我的解决方案:

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

这似乎可以与Bootstrap 3完美配合。为什么这不是公认的答案?它比其他简单得多(4个CSS指令)。
danielricecodes

@danielricecodes我将尝试一下,并认为这是因为视口单位存在问题。。scooterlord提出的答案提出了甚至与IE9和iOs的兼容性,这对我来说是个问题。如果查看canIuse的问题页面,您将看到iO和IE10及更早版本存在问题。并非我同意或不同意这是正确的答案。我只是指出为什么可能没有选择答案。
马拉沃斯

1
这种方法存在一个问题,即模态具有可滚动的内容(内容超出了窗口
容纳的范围

这应该是公认的答案。到目前为止,这是唯一适用于我的解决方案。谢谢你
shifu

如果您的模态内容大于屏幕高度(如果模态必须滚动),则此方法将不起作用
Brett Gregson

18

在我的案例中,我所做的就是在知道CSS模态的高度的情况下将CSS设置为顶部

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

在我的CSS中

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

1
作为一个菜鸟到CSS,这个答案似乎是最可怕的,并完成了任务
奥德本多夫

2
这不能回答问题的第一部分:“ ..何时不知道模态的确切高度?”
natec

15

添加此简单的CSS也可以。

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

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

什么是适合内容?
马克·罗素

12

有一种使用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/


7
由于宽度和高度固定,因此无法在移动设备上响应。
ianstigator

您的答案假设每个设备的屏幕分辨率都相同
Patricio Rossi

无人。我假设您了解此示例,并且能够将其适应每种情况。
达里奥·费雷尔

在引导3.3.0运行成功,谢谢
阿明Ghaderi

11

扩展了@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;
}

8

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

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

});

7

这里找到了完美的解决方案

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

1
谢谢。一次更改对我来说很完美:dialog.css(“ margin-top”,Math.max(0,($(document).scrollTop()+(($(window).height()-dialog.height()) / 2))));
Viacheslav Soldatov '18

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

在选择器上进行了几处调整,这就像一种魅力。@$modal = $('.fade.in'); modalBox = @$modal.find('.modal-content'); initModalHeight = modalBox.outerHeight(); userScreenHeight = @$modal.outerHeight()
juliangonzalez

4

这是另一种效果很好的CSS唯一方法,并基于此:http: //zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

ass

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

与其他transform解决方案一样,当模式具有可滚动的内容(内容超出窗口
容纳的

3

我已经从波纹管链接下载了bootstrap3-dialog,并修改了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;
} 

这是可以在您自己的代码中应用的修改,而不必更改原始的BSDialog源:gist.github.com/mahemoff/8ff6d3782d2da6f9cbb3(只是对JS的一些修改,它也是用Coffee编写的,但您知道了)。
mahemoff 2014年

3

这对我有用:

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

2

尝试这样的事情:

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

1
这可能工作得很好,但是引导程序模态具有绝对值,内部固定,在该内部以及那个内部...:/
scooterlord

1
这些类与Bootstrap / Bootstrap模态有什么关系?
lofihelsinki


1

一种简单的方法。为我工作。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>    

1

另一个解决方案将为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);

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

1

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

它只需要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/


1

这已经很老了,并且特别要求使用Bootstrap 3的解决方案,但是对于任何想知道的人:从Bootstrap 4开始,有一个称为的内置解决方案.modal-dialog-centered。这是问题所在:https : //github.com/twbs/bootstrap/issues/23638

因此,使用V4你只需要添加.modal-dialog-centered.modal-dialog垂直居中的模式:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

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


0

对于居中,我不了解过于复杂的解决方案。引导程序已经为您将其水平居中,因此您无需为此烦恼。我的解决方案是仅使用jQuery设置最高利润。

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

我在远程加载内容时使用了loading.bs.modal事件,并且使用show.ba.modal事件会导致高度计算不正确。当然,如果需要快速响应,可以为调整大小的窗口添加事件。


如果模态足够大,则可能导致问题
scooterlord 2014年

0

实现此概念的非常简单的方法,您将始终通过css在屏幕的模态中获得模态,如下所示:http : //jsfiddle.net/jy0zc2jc/1/

您只需要modal按照以下css将显示类作为表分类即可:

display:table

modal-dialog作为display:table-cell

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


我完全看不到模态
ThaDafinser 2015年

我唯一看到的(在Google Chrome中)是一个红色的十字图标和背景
ThaDafinser 2015年

当模态内容超出窗口
容纳的

0

没那么复杂。

请尝试以下操作:

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

0

使用此简单脚本将模态居中。

如果需要,可以设置一个自定义类(例如:.modal.modal-vcenter而不是.modal),以将功能仅限制为某些模态。

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

0

在移动植物形式中,它可能看起来有些不同,这是我的代码。

<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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.