Dikey merkezleme Bootstrap kalıcı penceresi

Modalımı görüntü alanında ortalamak istiyorum (ortada) Bazı css özellikleri eklemeye çalıştım

 .modal { position: fixed; top:50%; left:50%; }   

Bu örneği kullanıyorum http://jsfiddle.net/rniemeyer/Wjjnd/

denedim

$("#MyModal").modal('show').css(
    {
        'margin-top': function () {
            return -($(this).height() / 2);
        },
        'margin-left': function () {
            return -($(this).width() / 2);
        }
    })

Bu işi yapar: http://jsfiddle.net/sRmLV/1140/

Bir yardımcı div ve bazı özel css kullanır. Javascript veya jQuery gerekmez.

HTML (Bootstrap'ın demo koduna göre )

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

CSS

.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

Çünkü gpcola'nın cevabı benim için işe yaramadı, ben biraz düzenledim, şimdi çalışmaları. Dönüştürme yerine "kenar boşluğu" kullandım. Ayrıca, çünkü bana çok kötü bir konumlandırma atlama (bootstrap animasyonlar olduğunda görünür) verdi çünkü "gösterilen" olay yerine "göster" kullanın. Konumlandırmadan önce ekranı "engelleme" olarak ayarladığınızdan emin olun, aksi takdirde $ dialog.height () 0 olur ve mod tamamen ortalanmaz.

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

Uygulamam için yaptığım şey bu. Bootstrap.css dosyasında aşağıdaki sınıflara bakarsanız .modal-dialog varsayılan 10px ve @media ekranı dolgusuna ve (min-width: 768px) .modal-dialog'un üst dolgusu 30px olarak ayarlanmıştır. Özel css dosyamda, bir ortam ekranı genişliği belirtmeden tüm ekranlar için üst dolgumu% 15 olarak ayarladım. Bu yardımcı olur umarım.

.modal-dialog {
  padding-top: 15%;
}

Tüm HTML5 tarayıcıları için bulduğum en iyi yol:

body.modal-open .modal {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal .modal-dialog {
    margin: auto;
}

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="table">
        <div class="table-cell">
            <div class="modal-dialog">
                <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>
</div>

// Stiller

.table {
 display: table;
 height:100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}

Özel bildiriminizde ayarlanan değeri zorlamak için .modal.fade.in dosyasında en üst parametre geçersiz kılınıyor, üst kısma !importantsonra anahtar kelimeyi ekleyin . Bu, tarayıcıyı bu değeri kullanmaya ve anahtar kelime için diğer değerleri yok saymaya zorlar. Bunun dezavantajı başka hiçbir yerde değeri geçersiz kılamaz.

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
}

Bu benim için mükemmel çalışıyor:

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

tam Demo URL'si: https://codepen.io/dimbslmh/full/mKfCc

Bootstrap 4'ten itibaren JavaScript olmadan bunu başarmak için aşağıdaki sınıf eklenmiştir.

modal-dialog-centered

Belgelerini burada bulabilirsiniz .

Vd için teşekkür ederiz modal dikey ortalamak için .modal-dialog merkezli hem .modal-dialog-center eklemeniz gerekir.

kullanabilirsiniz:

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
    transform: translate(-50%, -50%);
}

hem dikey hem de yatay olarak ortalayın.

Çünkü buradaki cevabın çoğu işe yaramadı veya sadece kısmen çalıştı:

body.modal-open .modal[style]:not([style='display: none;']) {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal[style]:not([style='display: none;']) .modal-dialog {
    margin: auto;
}

[Stil] seçiciyi yalnızca tüm modller yerine şu anda etkin olan moddaki stili uygulamak için kullanmanız gerekir. .inharika olurdu, ancak yalnızca geçiş tamamlandıktan sonra eklenmiş gibi görünüyor ki bu çok geç ve bazı kötü geçişler yapıyor. Neyse ki, bootstrap her zaman kulağa bir stil niteliği uygular, tıpkı göstermeye başladığı gibi, bu biraz hileli, ama işe yarıyor.

Bu :not([style='display: none;'])bölüm, stil özniteliğini doğru şekilde kaldırmamak ve iletişim kutusunu kapattığınızda stil ekranını yok olarak ayarlamak için önyükleme için bir çözümdür.

Bootstrap 3 modelinde dikey hizalama merkezine şu şekilde ulaşabilirsiniz:

.modal-vertical-centered {
  transform: translate(0, 50%) !important;
  -ms-transform: translate(0, 50%) !important; /* IE 9 */
  -webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */
}

ve bu css sınıfını "kalıcı iletişim kutusu" kapsayıcısına ekleyin

<div class="modal-dialog modal-vertical-centered">
...

jsFiddle çalışma örneği: http://jsfiddle.net/U4NRx/

Bunu yapmanın en temiz ve basit yolu Flexbox'ı kullanmaktır! Aşağıdakiler, ekranın ortasındaki bir Bootstrap 3 modunu dikey olarak hizalayacaktır ve burada yayınlanan diğer tüm çözümlerden çok daha temiz ve basittir:

body.modal-open .modal.in {
  display: flex !important;
  align-items: center;
}

NOT: Bu en basit çözüm olsa da, tarayıcı desteği nedeniyle herkes için çalışmayabilir: http://caniuse.com/#feat=flexbox

Görünüşe göre (her zamanki gibi) IE geride kalıyor. Benim durumumda, kendim veya müşteriler için geliştirdiğim tüm ürünler IE10 +. (aslında ürünü geliştirmek ve daha hızlı MVP çıkarmak için kullanılabilir zaman eski IE sürümlerini destekleyen geliştirme zaman yatırım akıllıca bir mantıklı değil). Bu kesinlikle herkesin sahip olduğu bir lüks değil.

Daha büyük sitelerin flexbox'ın desteklenip desteklenmediğini algıladığını ve sayfanın gövdesine bir sınıf uyguladığını gördüm - ancak bu ön uç mühendislik seviyesi oldukça sağlam ve yine de bir yedeklemeye ihtiyacınız olacak.

İnsanları web'in geleceğini benimsemeye teşvik ediyorum. Flexbox harika ve mümkünse kullanmaya başlamalısınız.

Not - Bu site gerçekten flexbox'ı bir bütün olarak kavrama ve herhangi bir kullanım durumuna uygulamada bana yardımcı oldu: http://flexboxfroggy.com/

EDIT: Bir sayfada iki modals durumunda, bu .modal.in için geçerli olmalıdır

Avantajları:

• modal içerikler cihazdan daha uzun olsa bile erişilebilir
• kullanmaz display:table-cell(bu mizanpajlar için değildir)
• varsayılan Bootstrap 3 kipinde herhangi bir değişiklik gerektirmez markup
• konumlandırma saf CSS'dir. JS, altında ve üstünde tıklama / dokunma yöntemini kapatmak için eklenir
• Kullanmayanlar SCSSiçin ön ekli olmayanları ekledim gulpveyagrunt

// closes the modal on click/tap below/above the modal

$('.modal-dialog').on('click tap', function(e){
    if (e.target.classList.contains('modal-dialog')) {
    $('.modal').modal('hide');
  }
})

.modal-dialog {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow-y: auto;
  min-height: -webkit-calc(100vh - 60px);
  min-height: -moz-calc(100vh - 60px);
  min-height: calc(100vh - 60px);
}
@media (max-width: 767px) {
  .modal-dialog {
    min-height: -webkit-calc(100vh - 20px);
    min-height: -moz-calc(100vh - 20px);
    min-height: calc(100vh - 20px);
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</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>

Not : Bu cevabı Bootstrap 3'ün en son özellikleriyle güncel tutmayı planlıyorum. Bootstrap 4 çözümü için bu cevaba bakınız (şimdilik aşağı yukarı aynılar, ancak zamanla farklılık gösterebilirler). Herhangi bir hata veya sorun bulursanız, bana bildirin, güncelleyeceğim. Teşekkürler.

Temiz, ön eksiz SCSS( gulp/ ile kullanım için grunt):

.modal-dialog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  min-height: calc(100vh - 60px);
  @media (max-width: 767px) {
    min-height: calc(100vh - 20px);
  }
}

Yine başka bir CSS çözümü. Görünüm bağlantı noktasından daha büyük pop-up'lar için çalışmaz.

.modal-dialog {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: 0;
    margin-bottom: 0; 
}
.modal.fade .modal-dialog {
    transition: top 0.4s ease-out;
    transform: translate(0, -50%);
    top: 0;
}
.modal.in .modal-dialog {
    transform: translate(0, -50%);
    top: 50%;
}

Gelen .modal-dialogsınıfı (akrabasından) mutlak konumu geçersiz kılma ve içerik merkezlemeright:0, left: 0

Gelen .modal.fade .modal-dialog , .modal.in .modal-dialogüzerinde geçiş animasyon ayarı topyerine çevirmek yapılması öngörülüyor.

margin-topküçük pop-up durumunda pop-up'ı merkezin biraz altına taşır ve uzun pop-up'lar durumunda, modal başlık ile sıkışır. bundan dolayımargin-top:0, margin-bottom:0

Daha da hassaslaştırmanız gerekiyor.

Açısal-ui bootstrap kullananlar için yukarıdaki bilgilere dayanarak aşağıdaki sınıfları ekleyebilirsiniz:

Not: Başka bir değişikliğe gerek yoktur ve tüm modülleri çözecektir.

// The 3 below classes have been placed to make the modal vertically centered
.modal-open .modal{
    display:table !important;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}

.modal-dialog{
    display: table-cell;
    vertical-align: middle;
    pointer-events: none;
}

.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;
    pointer-events: all;
}

Bize javascript gerek yok. Boostrap modal göründüğünde .in sınıfını ekler. Bu sınıf kombinasyonunu flex css ile modalclassName.fade.in ile değiştirmeniz yeterlidir.

modalınızı dikey ve yatay olarak ortalamak için bu css'yi ekleyin.

.modal.fade.in {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.modal.fade.in .modal-dialog {
    width: 100%;
}

Seçimim, sadece küçük bir CSS: (IE8'de çalışmaz)

.modal.fade .modal-dialog {
    transform: translate(-50%, -80%);
}

.modal.in .modal-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0px;
}

Kipin nasıl göründüğünü değiştirmek için ilk kuralla oynayabilirsiniz.

Kullanma: Bootstrap 3.3.4

Sadece aşağıdaki CSS'yi mevcut olanınıza ekleyin, Benim için iyi çalışıyor

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

Dayanarak Arany'nin cevap , aynı zamanda sayfa kaydırma için muhasebe.

(function($) {
    "use strict";
    function positionModals(e) {
        var $this = $(this).css('display', 'block'),
            $window = $(window),
            $dialog = $this.find('.modal-dialog'),
            offset = ($window.height() - $window.scrollTop() - $dialog.height()) / 2,
            marginBottom = parseInt($dialog.css('margin-bottom'), 10);

        $dialog.css('margin-top', offset < marginBottom ? marginBottom : offset);
    }

    $(document).on('show.bs.modal', '.modal', positionModals);

    $(window).on('resize', function(e) {
        $('.modal:visible').each(positionModals);
    });
}(jQuery));

Bunun Rens de Nobel'in çözümünden biraz daha temiz saf CSS çözümü olduğunu düşünüyorum. Ayrıca bu iletişim kutusunun dışını tıklatarak kapatılmasını engellemez.

http://plnkr.co/edit/JCGVZQ?p=preview

Önyükleme komutları CSS'sinden daha yüksek özgüllük elde etmek için .modal-dialog sınıfıyla DIV kapsayıcısına bir miktar CSS sınıfı ekleyin.

HTML

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog centered modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Ve bu .modal-dialog.centered kabını sabit ve düzgün konumlandırın.

CSS

.modal .modal-dialog.centered {
    position: fixed;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
}

Veya flexbox kullanarak daha da basit.

CSS

.modal {
    display: flex;
    align-items: center;
    justify-content: center;
}

Bu, BS2'de çalışır, v2'de test edilmez. Kipi dikey olarak ortalar. Oraya geçiş yapacağını unutmayın - yalnızca konum düzenleme CSS transitionözelliğinde.modal-dialog

centerModal = function() {
    var $dialog = $(this).find(".modal-dialog"),
        offset = ($(window).height() - $dialog.height()) / 2;

    // Center modal vertically in window
    $dialog.css({
        'transform': 'translateY(' + offset + 'px) !important',
    });
};

$('.modal').on('shown.bs.modal', centerModal);
$(window).on("resize", function() {
    $('.modal').each(centerModal);
});

e(document).on('show.bs.modal', function () {
        if($winWidth < $(window).width()){
            $('body.modal-open,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',$(window).width()-$winWidth)
        }
    });
    e(document).on('hidden.bs.modal', function () {
        $('body,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',0)
    });

Bu Arany'nin cevabını alır ve mod ekranın yüksekliğinden daha uzunsa çalışmasını sağlar:

function centerModal() {
    $(this).css('display', 'block');
    var $dialog = $(this).find(".modal-dialog");
    var offset = ($(window).height() - $dialog.height()) / 2;
    //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
    var bottomMargin = $dialog.css('marginBottom');
    bottomMargin = parseInt(bottomMargin);
    if(offset < bottomMargin) offset = bottomMargin;
    $dialog.css("margin-top", offset);
}

$('.modal').on('show.bs.modal', centerModal);
$(window).on("resize", function () {
    $('.modal:visible').each(centerModal);
});

Bootstrap modal.js'ye dikey modsal merkezleme eklemek için bunu Modal.prototype.showişlevin sonuna ekledim :

var $modalDialog = $('.modal-dialog'),
        modalHeight = $modalDialog.height(),
        browserHeight = window.innerHeight;

    $modalDialog.css({'margin-top' : modalHeight >= browserHeight ? 0 : (browserHeight - modalHeight)/2});

Kalıcı olarak Orta Tümünü Hizala iletişim kutusunu yapmak için.

/* Not:

Seçici atamanıza gerek yokken, belgedeki tüm modalları bulur ve dikey olarak orta yapar

2. orta olmak için bazı belirli modal orta önlemek için kullanabilirsiniz: tıklama olay seçici değil

* /

 $( "[data-toggle='modal']" ).click(function(){
     var d_tar = $(this).attr('data-target'); 
     $(d_tar).show();   
     var modal_he = $(d_tar).find('.modal-dialog .modal-content').height(); 
     var win_height = $(window).height();
     var marr = win_height - modal_he;
     $('.modal-dialog').css('margin-top',marr/2);
  });

Milano Pandya kalkışlı

Modals merkezleyen bu basit komut dosyasını kullanın.

İsterseniz, yalnızca bazı modals işlevini sınırlamak için özel bir sınıf (.modal yerine ex: .modal.modal-vcenter) ayarlayabilirsiniz.

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

Ayrıca, modalın yatay aralığı için bu CSS düzeltmesini ekleyin; modals üzerinde kaydırma gösteririz, vücut kaydırma Bootstrap tarafından otomatik olarak gizlenir:

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

Bu soruya başka bir CSS yanıtı ...
Bu çözüm, CSS'yi sadece istenen efekti elde etmek için kullanıyor ve yine de modalın dışını tıklatarak kapatma yeteneğini koruyor. Ayrıca .modal-content, pop-up'ınızın görünüm penceresinin ötesine geçmemesi için yükseklik ve genişlik maksimumlarını ayarlamanıza olanak tanır . İçerik modsal boyutun ötesine büyüdüğünde otomatik olarak bir kaydırma görünür.

not:
Bunun .modal-dialog divdüzgün çalışması için önerilen Bootstrap atlanmalıdır (hiçbir şeyi bozmuyor gibi görünmektedir). Chrome 51 ve IE 11'de test edilmiştir.

CSS Kodu:

.modal {
   height: 100%;
   width: 100%;
}

.modal-content {
   margin: 0 auto;
   max-height: 600px;
   max-width: 50%;
   overflow: auto;
   transform: translateY(-50%);
}

DÜZENLEME:.modal-dialog sınıf bir kullanıcı modal kendisi dışında tıklayarak modal kapatabilir olsun veya olmasın seçmenize olanak sağlar. Çoğu model açık bir 'kapat' veya 'iptal' düğmesine sahiptir. Bu geçici çözümü kullanırken bunu aklınızda bulundurun.

Modalınızı genişlik ve yükseklik ile merkezileştirmenin en iyi çözümü, css add ve modal'da bu 'merkezileştirmeyi' bir sınıf olarak eklemektir.

.centralize{
   position:absolute;
   left:50%;
   top:50%;

   background-color:#fff;
   transform: translate(-50%, -50%);
   width: 40%; //specify watever u want
   height: 50%;
   }

Dikey olarak ortalanmış Modal dikey olarak ortalamak için .modal-iletişim kutusu merkezli .modal-iletişim kutusu merkezli ekle

Demo modunu başlat

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