To jest dwuczęściowe pytanie:

1. Jak ustawić modal pionowo w środku, gdy nie znasz dokładnej wysokości modalu?

2. Czy możliwe jest wyśrodkowanie modalu i przepełnienie: auto w ciele modalnym, ale tylko wtedy, gdy modal przekroczy wysokość ekranu?

Próbowałem użyć tego:

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

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

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

Daje mi to wynik, którego potrzebuję, gdy zawartość jest znacznie większa niż pionowy rozmiar ekranu, ale w przypadku małych treści modalnych jest to praktycznie bezużyteczne.

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

I dostosuj trochę klasę .fade, aby upewnić się, że pojawia się poza górną ramką okna, a nie na środku

1. Jak ustawić modal pionowo w środku, gdy nie znasz dokładnej wysokości modalu?

Aby absolutnie wyśrodkować moduł Bootstrap 3 Modal bez deklarowania wysokości, najpierw musisz zastąpić CSS programu Bootstrap, dodając go do arkusza stylów:

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

Spowoduje to umieszczenie modalnego okna dialogowego w lewym górnym rogu na środku okna.

Musimy dodać tę kwerendę medialną, w przeciwnym razie margines modalny-lewy jest nieprawidłowy na małych urządzeniach:

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

Teraz będziemy musieli dostosować jego pozycję za pomocą JavaScript. W tym celu dajemy elementowi ujemny górny i lewy margines równy połowie jego wysokości i szerokości. W tym przykładzie użyjemy jQuery, ponieważ jest on dostępny z 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);
        }
    });
});

Aktualizacja (01/10/2015):

Dodanie do odpowiedzi Finika . Kredyty na centrowanie w nieznanym .

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

Zwróć uwagę na ujemny margines, prawda? Usuwa to przestrzeń dodaną przez blok wbudowany. Ta przestrzeń powoduje, że modal przeskakuje na dół strony @media szerokość <768px.

2. Czy możliwe jest wyśrodkowanie modalu i przepełnienie: auto w ciele modalnym, ale tylko wtedy, gdy modal przekroczy wysokość ekranu?

Jest to możliwe poprzez nadanie modułowi modalnemu przelewu-y: auto i maksymalnej wysokości. To wymaga nieco więcej pracy, aby działało poprawnie. Zacznij od dodania tego do swojego arkusza stylów:

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

Użyjemy jQuery ponownie, aby uzyskać wysokość okna i najpierw ustawić maksymalną wysokość zawartości modalnej. Następnie musimy ustawić maksymalną wysokość ciała modalnego, odejmując zawartość modalną za pomocą nagłówka modalnego i stopki modalnej:

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

Możesz znaleźć działające demo tutaj z Bootstrap 3.0.3: http://cdpn.io/GwvrJ EDYCJA: Zalecam użycie zamiast tego zaktualizowanej wersji dla bardziej responsywnego rozwiązania: http://cdpn.io/mKfCc

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

(Zaktualizowano 30.11.2015 http://cdpn.io/mKfCc z powyższą edycją)

Moje rozwiązanie

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

Można to po prostu naprawić 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);
}

Z prefiksem

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

Wymyśliłem czyste rozwiązanie css! Jest to jednak css3, co oznacza, że ​​ie8 lub niższy nie jest obsługiwany, ale poza tym jest testowany i działa na iOS, Android, tj. 9 +, Chrome, Firefox, Safari na pulpicie ..

Korzystam z następującego 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;
}

Oto skrzypce. http://codepen.io/anon/pen/Hiskj

.. wybierając to jako poprawną odpowiedź, ponieważ nie ma dodatkowego ciężkiego javascript, który rzuca przeglądarkę na kolana w przypadku więcej niż jednego modalu.

Jeśli nie masz nic przeciwko korzystaniu z Flexboksa, powinno to pomóc w jego rozwiązaniu.

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

.modal-content {
  margin: 0 auto;
}

Moje rozwiązanie:

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

Wszystko, co zrobiłem w moim przypadku, to ustawić Top w moim css, znając wysokość modalu

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

w moim css ustawiłem

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

Dodanie tego prostego css również działa.

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

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

Jest to najprostszy sposób, aby to zrobić za pomocą css:

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

Otóż ​​to. Zauważ, że należy go zastosować tylko do.modal-dialog div kontenera.

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

Rozszerzając doskonałą odpowiedź @ Finik, ta poprawka jest stosowana tylko do urządzeń innych niż mobilne. Testowałem w IE8, Chrome i Firefox 22 - działa z bardzo długą lub krótką zawartością.

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

Najbardziej uniwersalne rozwiązanie, które napisałem. Dynamicznie oblicza z wysokością okna dialogowego. (Kolejnym krokiem może być ponowne obliczenie wysokości okien dialogowych przy zmianie rozmiaru okna).

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

});

Znajdź idealne rozwiązanie stąd

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

Oto jeszcze jedna metoda, która działa całkiem dobrze i jest oparta na tym: 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;
    }
}

pobrałem bootstrap3-dialog z poniższego linku i zmodyfikowałem funkcję open w bootstrap-dialog.js

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

Kod

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

To działa dla mnie:

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

Wypróbuj coś takiego:

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

Możesz sprawdzić tę kolekcję metod absolutnego centrowania div: http://codepen.io/shshaw/full/gEiDt

Prosty sposób. Pracuj dla mnie. 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>    

jeszcze inne rozwiązanie, które ustawi prawidłową pozycję dla każdego widocznego modalu na window.resizezdarzenie i na 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);

Wiem, że jest trochę za późno, ale dodaję nową odpowiedź, aby nie zgubić się w tłumie. Jest to przeglądarka na wiele urządzeń mobilnych, która działa wszędzie tak, jak powinna.

Po prostu musi modal-dialogbyć zapakowany w modal-dialog-wrapklasę i musi mieć następujące dodatki kodu:

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

Okno dialogowe zaczyna się na środku, aw przypadku dużej zawartości rośnie po prostu pionowo, aż pojawi się pasek przewijania.

Oto działające skrzypce dla twojej przyjemności!

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

Jest to dość stary i konkretnie prosi o rozwiązanie za pomocą Bootstrap 3, ale dla każdego, kto się zastanawia: od Bootstrap 4 jest wbudowane rozwiązanie o nazwie .modal-dialog-centered. Oto problem: https://github.com/twbs/bootstrap/issues/23638

Więc za pomocą v4 wystarczy dodać .modal-dialog-centereddo .modal-dialogpionowo wyśrodkować modalne:

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

Rozważ użycie wtyczki bootstrap-modal tutaj - https://github.com/jschr/bootstrap-modal

Wtyczka wyśrodkuje wszystkie twoje moduły

Do centrowania nie rozumiem zbyt skomplikowanych rozwiązań. bootstrap już wyśrodkowuje go dla Ciebie poziomo, więc nie musisz z tym bałaganu. Moje rozwiązanie ma właśnie ustawić górny margines tylko przy użyciu jQuery.

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

Użyłem zdarzenia load.bs.modal, ponieważ ładuję zawartość zdalnie, a użycie zdarzenia pokazanego na stronie.ba.modal powoduje nieprawidłowe obliczenie wysokości. Możesz oczywiście dodać zdarzenie do zmiany rozmiaru okna, jeśli potrzebujesz, aby było tak responsywne.

Bardzo, bardzo łatwy sposób na osiągnięcie tego pomysłu, a modalny będzie zawsze dostępny w moddle ekranu przez css jako fllow: http://jsfiddle.net/jy0zc2jc/1/

musisz po prostu modalwyświetlić klasę jako tabelę, wykonując następujące polecenie css:

display:table

i modal-dialogjakdisplay:table-cell

patrz pełny przykład roboczy w danym skrzypcach

to nie jest takie skomplikowane.

spróbuj tego:

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

Użyj tego prostego skryptu, który wyśrodkuje modale.

Jeśli chcesz, możesz ustawić niestandardową klasę (np. .Modal.modal-vcenter zamiast .modal), aby ograniczyć funkcjonalność tylko do niektórych modów.

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

Dodaj również tę poprawkę CSS dla poziomych odstępów modalu; pokazujemy zwój na modach, przewijanie ciała jest automatycznie ukryte przez Bootstrap:

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

W mobilnej formie może wyglądać trochę inaczej, oto mój kod.

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