引导3模式垂直位置中心。

This is a two part question:

这是两个部分的问题:

1. How can you position the modal vertically in the center when you don't know the exact height of the modal?

   当你不知道模态的准确高度时，你怎么能把模态垂直放置在中间?

2. Is it possible to have the modal centered and have overflow:auto in the modal-body, but only if the modal exceeds the screen height?

   是否有可能以模态为中心，并有溢出:模态的自动，但只有当模态超过屏幕高度时?

I have tried using this:

我试过用这个:

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

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

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

This gives me the result I need when the content is much larger than vertical screen size, but for small modal contents it's pretty much unusable.

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

29 个解决方案

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

And adjust a little bit .fade class to make sure it appears out of the top border of window, instead of center

稍微调整一下。渐变类，以确保它从窗口的顶部边缘出现，而不是中心。

#2

1. How can you position the modal vertically in the center when you don't know the exact height of the modal?

1。当你不知道模态的准确高度时，你怎么能把模态垂直放置在中间?

To absolute center the Bootstrap 3 Modal without declaring a height, you will first need to overwrite the Bootstrap CSS by adding this to your style sheet:

在没有声明高度的情况下，您首先需要重写Bootstrap CSS，将其添加到您的样式表中:

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

This will position the modal-dialogs top-left corner in the center of the window.

这将定位在窗口*的modal-dialogs左上角。

We have to add this media query or else the modal margin-left is wrong on small devices:

我们必须添加这个媒体查询，否则在小设备上，模态左边框是错误的:

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

Now we will need to adjust its position with JavaScript. To do that we give the element a negative top and left margin equal to half of its height and width. In this example we will be using jQuery since it is available with Bootstrap.

现在我们需要用JavaScript来调整它的位置。要做到这一点，我们给元素一个负的顶部和左边界等于它的高度和宽度的一半。在本例中，我们将使用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);
        }
    });
});

Update (01/10/2015):

Adding on Finik's answer. Credits to Centering in the Unknown.

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

Notice the negative margin-right? This removes the space added by inline-block. That space causes the modal to jump to the bottom of the page @media width < 768px.

注意到消极margin-right吗?这将删除inline-block添加的空间。该空间导致模式跳到页面的底部，@media width < 768px。

2. Is it possible to have the modal centered and have overflow:auto in the modal-body, but only if the modal exceeds the screen height?

2。是否有可能以模态为中心，并有溢出:模态的自动，但只有当模态超过屏幕高度时?

This is possible by giving the modal-body an overflow-y:auto and a max-height. This takes a bit more work to get it working properly. Start with adding this to your style sheet:

这是可能的，通过给模体一个超流y:汽车和一个高度。这需要更多的工作才能使它正常工作。从把它添加到你的样式表开始:

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

We will use jQuery again to get the window height and set the max-height of the modal-content first. Then we have to set the max-height of the modal-body, by subtracting the modal-content with the modal-header and modal-footer:

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

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

You can find a working demo here with Bootstrap 3.0.3: http://cdpn.io/GwvrJ EDIT: I recommend using the updated version instead for a more responsive solution: http://cdpn.io/mKfCc

您可以通过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'));
  }
});

(Updated 30/11/2015 http://cdpn.io/mKfCc with above edit)

(更新30/11/2015 http://cdpn。io / mKfCc上面编辑)

#3

My solution

我的解决方案

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

#4

It can simply can be fixed with display: flex

它可以简单地用显示来固定: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);
}

With prefix

与前缀

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

#5

I came up with a pure css solution! It's css3 though, which means ie8 or lower is not supported, but other than this it's tested and working on ios, android, ie9+, chrome, firefox, desktop safari..

我想出了一个纯粹的css解决方案!它是css3，这意味着ie8或更低的版本是不受支持的，但除此之外，它还在ios、android、ie9+、chrome、firefox、桌面safari浏览器上进行测试和工作。

I am using the following css:

我使用的是以下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;
}

Here is a fiddle. http://codepen.io/anon/pen/Hiskj

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

..selecting this as the correct answer since there's no extra heavy javascript that brings the browser to its knees in case of more than one modals.

. .选择这个作为正确的答案，因为没有额外的javascript，它使浏览器的膝盖在一个以上的模式。

#6

If you're okay with using flexbox then this should help solve it.

如果你可以使用flexbox，那么这将有助于解决它。

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

.modal-content {
  margin: 0 auto;
}

#7

All what I did in my case is to set the Top in my css knowing the height of the modal

在我的例子中，我所做的是在css中设置顶部，知道模态的高度。

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

…< / div >

in my css i set

在我的css中设置。

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

#8

Expanding on @Finik's excellent answer, this fix is only applied to non-mobile devices. I tested in IE8, Chrome, and Firefox 22 - it works with very long or short content.

扩展到@Finik的优秀答案，这个修复只适用于非移动设备。我在IE8、Chrome和火狐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;
}

#9

There is an easiest way to do this using css:

使用css有一个最简单的方法:

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

That's it. Notice that it is only needed to be applied to the .modal-dialog container div.

就是这样。请注意，只需要将其应用到.modal-dialog容器div。

Demo: https://jsfiddle.net/darioferrer/0ueu4dmy/

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

#10

My solution:

我的解决方案:

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

#11

The most universal solution I wrote. Dynamicaly computes with dialog height. (Next step could be recalculating of dialogs' height on window resize.)

我写的最普遍的解决方案。动态计算与对话框高度。(下一步可以重新计算对话框在窗口大小上的高度。)

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

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

});

#12

Found the perfect solution from here

从这里找到完美的解决方案。

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

#13

Try something like this:

试试这样:

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

#14

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

#15

i have downloaded bootstrap3-dialog from bellow link and modified the open function in bootstrap-dialog.js

我从bellow link下载了bootstrap3对话框，并在bootstrap-dialog.js中修改了open函数。

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

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

Code

代码

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

Css

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

#16

Here's one other css only method that works pretty well and is based on this: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

这是另一个css的唯一方法，它运行得很好，并且基于这个:http://zerosixe.se/vertical - align-any-_- 3- lins -of-css/。

sass:

萨斯:

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

#17

You might want to check out this collection of methods for absolute centering a div: http://codepen.io/shshaw/full/gEiDt

您可能想要查看这一系列的方法，以绝对定心一个div: http://codepen.io/shshaw/full/gEiDt。

#18

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

#19

This works for me:

这工作对我来说:

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

#20

Consider using the bootstrap-modal plugin found here - https://github.com/jschr/bootstrap-modal

考虑使用在这里找到的bootstrap-modal插件——https://github.com/jschr/bootstrap-modal。

The plugin will center all of your modals

这个插件将会把你所有的情态动词都集中起来。

#21

For the centering, I don't get what's with the overly complicated solutions. bootstrap already centers it horizontally for you, so you don't need to mess with this. My solution is just set a top margin only using jQuery.

对于定心，我不知道什么是过于复杂的解决方案。bootstrap已经为你水平放置了它，所以你不需要把它弄乱。我的解决方案只是使用jQuery设置一个顶部边缘。

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

I've used the loaded.bs.modal event as I am remotely loading content, and using the shown.ba.modal event causes the height calculation to be incorrect. You can of course add in an event for the window being resized if you need it to be that responsive.

我使用了loaded.bs。模式事件，因为我是远程加载内容，并使用shown.ba。模态事件导致高度计算不正确。当然，如果你需要它的响应，你可以添加一个窗口大小的事件。

#22

Very very easy way to achieve this concept and you will get modal always in the moddle of your screen by css as fllow : http://jsfiddle.net/jy0zc2jc/1/

实现这一概念的非常简单的方法是，您将在屏幕的moddle中始终使用css作为fllow: http://jsfiddle.net/jy0zc2jc/1/。

you have to just modal class display as table by following css:

您必须通过以下css来将类显示为表:

display:table

and modal-dialog as display:table-cell

和模态对话框显示:表格单元

see full working example in given fiddle

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

#23

it's not that complicated.

这并不复杂。

please try this:

请试试这个:

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

#24

A simple way. Work for me. Thks rensdenobel :) http://jsfiddle.net/rensdenobel/sRmLV/13/

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

#25

Use this simple script that centers the modals.

使用这个简单的脚本中心的modals。

If you want you can set a custom class (ex: .modal.modal-vcenter instead of .modal) to limit the functionality only to some modals.

如果您希望您可以设置一个自定义类(ex: .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);

Also add this CSS fix for the modal's horizontal spacing; we show the scroll on the modals, the body scrolls is hidden automatically by Bootstrap:

也添加这个CSS修复模式的水平间距;我们在情态上显示滚动条，身体的卷轴是自动隐藏的引导:

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

#26

yet another solution which will set a valid position for each visible modal on window.resize event and on show.bs.modal:

还有一种解决方案，它将为窗口中每个可见的模式设置一个有效的位置。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);

#27

In mobile plantform it might look a little different, here's my code.

在mobile plantform中，它可能看起来有点不同，这是我的代码。

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

#28

I know it's a bit late, but I am adding a new answer so that it doesn't get lost in the crowd. It's a cross-desktop-mobile-browser solution that works everywhere properly as it should.

我知道有点晚了，但我正在增加一个新的答案，以免在人群中迷失。它是一个跨桌面的移动浏览器解决方案，它在任何地方都能正常工作。

It just needs the modal-dialog to be wrapped inside a modal-dialog-wrap class and need to have the following code additions:

它只需要将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;
}

The dialog starts centered and in cases of large content it simply grows vertically until a scrollbar appears.

对话框开始以中心为中心，在大量内容的情况下，它只是垂直地增长，直到出现一个滚动条。

Here is a working fiddle for your pleasure!

这是为你的快乐工作的小提琴!

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

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

#29

Table style

表格样式

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