Dies ist eine zweiteilige Frage:

1. Wie können Sie das Modal vertikal in der Mitte positionieren, wenn Sie die genaue Höhe des Modals nicht kennen?

2. Ist es möglich, das Modal zentriert zu haben und einen Überlauf zu haben: auto im Modalkörper, aber nur, wenn das Modal die Bildschirmhöhe überschreitet?

Ich habe versucht, dies zu verwenden:

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

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

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

Dies gibt mir das Ergebnis, das ich brauche, wenn der Inhalt viel größer als die vertikale Bildschirmgröße ist, aber für kleine modale Inhalte ist er ziemlich unbrauchbar.

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

Passen Sie die .fade-Klasse ein wenig an, um sicherzustellen, dass sie außerhalb des oberen Randes des Fensters und nicht in der Mitte angezeigt wird

1. Wie können Sie das Modal vertikal in der Mitte positionieren, wenn Sie die genaue Höhe des Modals nicht kennen?

Um das Bootstrap 3 Modal absolut zu zentrieren, ohne eine Höhe anzugeben, müssen Sie zuerst das Bootstrap-CSS überschreiben, indem Sie dies Ihrem Stylesheet hinzufügen:

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

Dadurch wird die obere linke Ecke der Modaldialoge in der Mitte des Fensters positioniert.

Wir müssen diese Medienabfrage hinzufügen, sonst ist der modale Rand links auf kleinen Geräten falsch:

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

Jetzt müssen wir seine Position mit JavaScript anpassen. Dazu geben wir dem Element einen negativen oberen und linken Rand, der der Hälfte seiner Höhe und Breite entspricht. In diesem Beispiel verwenden wir jQuery, da es mit Bootstrap verfügbar ist.

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

Hinzufügen zu Finiks Antwort . Credits für die Zentrierung im Unbekannten .

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

Beachten Sie die negative Marge-richtig? Dadurch wird der durch den Inline-Block hinzugefügte Speicherplatz entfernt. Dieser Raum bewirkt, dass das Modal zum Ende der Seite springt @media width <768px.

2. Ist es möglich, das Modal zentriert zu haben und einen Überlauf zu haben: auto im Modalkörper, aber nur, wenn das Modal die Bildschirmhöhe überschreitet?

Dies ist möglich, indem dem Modalkörper ein Überlauf-y: auto und eine maximale Höhe gegeben werden. Dies erfordert etwas mehr Arbeit, damit es richtig funktioniert. Beginnen Sie mit dem Hinzufügen zu Ihrem Stylesheet:

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

Wir werden jQuery erneut verwenden, um die Fensterhöhe zu ermitteln und zuerst die maximale Höhe des modalen Inhalts festzulegen. Dann müssen wir die maximale Höhe des Modalkörpers festlegen, indem wir den Modalinhalt mit dem Modal-Header und dem Modal-Footer subtrahieren:

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

Eine funktionierende Demo mit Bootstrap 3.0.3 finden Sie hier: http://cdpn.io/GwvrJ BEARBEITEN: Ich empfehle stattdessen die Verwendung der aktualisierten Version für eine reaktionsschnellere Lösung: 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'));
  }
});

(Aktualisiert am 30.11.2015 http://cdpn.io/mKfCc mit der obigen Bearbeitung)

Meine Lösung

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

Es kann einfach mit behoben werden 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);
}

Mit Präfix

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

Ich habe mir eine reine CSS-Lösung ausgedacht! Es ist zwar CSS3, was bedeutet, dass IE8 oder niedriger nicht unterstützt wird, aber ansonsten ist es getestet und funktioniert auf iOS, Android, IE9 +, Chrome, Firefox, Desktop-Safari.

Ich benutze das folgende 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;
}

Hier ist eine Geige. http://codepen.io/anon/pen/Hiskj

..Wählen Sie dies als die richtige Antwort, da es kein extra schweres Javascript gibt, das den Browser bei mehr als einem Modal in die Knie zwingt.

Wenn Sie mit der Verwendung von Flexbox einverstanden sind, sollte dies zur Lösung des Problems beitragen.

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

.modal-content {
  margin: 0 auto;
}

Meine Lösung:

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

Alles, was ich in meinem Fall getan habe, ist, das Top in meinem CSS zu setzen und die Höhe des Modals zu kennen

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

in meinem css habe ich gesetzt

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

Das Hinzufügen dieser einfachen CSS funktioniert auch.

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

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

Es gibt einen einfachsten Weg, dies mit CSS zu tun:

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

Das ist es. Beachten Sie, dass es nur auf den .modal-dialogContainer div angewendet werden muss .

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

Dieser Fix erweitert die hervorragende Antwort von @ Finik und gilt nur für nicht mobile Geräte. Ich habe in IE8, Chrome und Firefox 22 getestet - es funktioniert mit sehr langen oder kurzen Inhalten.

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

Die universellste Lösung, die ich geschrieben habe. Dynamisch berechnet mit Dialoghöhe. (Der nächste Schritt könnte darin bestehen, die Höhe der Dialoge bei der Fenstergröße neu zu berechnen.)

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

});

Von hier aus die perfekte Lösung gefunden

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

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

Hier ist eine andere CSS-Methode, die ziemlich gut funktioniert und darauf basiert: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-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;
    }
}

Ich habe Bootstrap3-Dialog von unten Link heruntergeladen und die Open-Funktion in Bootstrap-Dialog.js geändert

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

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

Das funktioniert bei mir:

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

Versuchen Sie so etwas:

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

Vielleicht möchten Sie diese Sammlung von Methoden zum absoluten Zentrieren eines Divs überprüfen: http://codepen.io/shshaw/full/gEiDt

Ein einfacher Weg. Arbeite für mich. 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>    

Noch eine andere Lösung, die eine gültige Position für jedes sichtbare Modal bei window.resizeEreignis und am festlegt 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);

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

Ich weiß, dass es etwas spät ist, aber ich füge eine neue Antwort hinzu, damit sie nicht in der Menge verloren geht. Es ist eine Cross-Desktop-Mobile-Browser-Lösung, die überall richtig funktioniert, wie es sollte.

Es muss nur modal-dialogin eine modal-dialog-wrapKlasse eingeschlossen werden und die folgenden Code-Ergänzungen enthalten:

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

Der Dialog beginnt zentriert und wächst bei großen Inhalten einfach vertikal, bis eine Bildlaufleiste angezeigt wird.

Hier ist eine funktionierende Geige für Ihr Vergnügen!

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

Dies ist ziemlich alt und erfordert speziell eine Lösung mit Bootstrap 3, aber für alle, die sich fragen: Ab Bootstrap 4 gibt es eine integrierte Lösung namens .modal-dialog-centered. Hier ist das Problem: https://github.com/twbs/bootstrap/issues/23638

Wenn Sie also v4 verwenden, müssen Sie nur hinzufügen .modal-dialog-centered, .modal-dialogum das Modal vertikal zu zentrieren:

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

Erwägen Sie die Verwendung des Bootstrap-Modal-Plugins, das Sie hier finden - https://github.com/jschr/bootstrap-modal

Das Plugin zentriert alle Ihre Modalitäten

Für die Zentrierung verstehe ich nicht, was mit den zu komplizierten Lösungen zu tun hat. Bootstrap zentriert es bereits horizontal für Sie, sodass Sie sich nicht damit herumschlagen müssen. Meine Lösung besteht darin, nur mit jQuery einen oberen Rand festzulegen.

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

Ich habe das Ereignis "load.bs.modal" verwendet, während ich Inhalte aus der Ferne lade, und die Verwendung des Ereignisses "named.ba.modal" führt dazu, dass die Höhenberechnung falsch ist. Sie können natürlich ein Ereignis für das Fenster hinzufügen, dessen Größe geändert wird, wenn es so reaktionsschnell sein soll.

Sehr, sehr einfacher Weg, um dieses Konzept zu erreichen, und Sie erhalten Modal immer im Moddle Ihres Bildschirms von CSS wie folgt: http://jsfiddle.net/jy0zc2jc/1/

Sie müssen nur die modalKlassenanzeige als Tabelle anzeigen, indem Sie dem folgenden CSS folgen:

display:table

und modal-dialogalsdisplay:table-cell

Siehe das vollständige Arbeitsbeispiel in der angegebenen Geige

es ist nicht so kompliziert.

Bitte versuchen Sie dies:

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

Verwenden Sie dieses einfache Skript, das die Modalitäten zentriert.

Wenn Sie möchten, können Sie eine benutzerdefinierte Klasse festlegen (z. B. .modal.modal-vcenter anstelle von .modal), um die Funktionalität nur auf einige Modalitäten zu beschränken.

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

Fügen Sie diesen CSS-Fix auch für den horizontalen Abstand des Modals hinzu. Wir zeigen die Schriftrolle auf den Modalen, die Körperschriftrollen werden von Bootstrap automatisch ausgeblendet:

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

In der mobilen Plantform sieht es vielleicht etwas anders aus, hier ist mein Code.

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