Jendela modal Bootstrap yang berpusat secara vertikal

Saya ingin memusatkan modal saya pada viewport (tengah) saya mencoba menambahkan beberapa properti css

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

Saya menggunakan contoh ini http://jsfiddle.net/rniemeyer/Wjjnd/

Saya mencoba

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

Ini berhasil: http://jsfiddle.net/sRmLV/1140/

Menggunakan helper-div dan beberapa custom css. Tidak perlu javascript atau jQuery.

HTML (berdasarkan kode demo Bootstrap )

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

Karena jawaban gpcola tidak berfungsi untuk saya, saya mengedit sedikit sehingga berfungsi sekarang. Saya menggunakan "margin-top" daripada mengubah. Selain itu, saya menggunakan acara "tampilkan" alih-alih "ditampilkan" karena setelah itu memberi saya lompatan posisi yang sangat buruk (terlihat ketika Anda menghidupkan animasi bootstrap). Pastikan untuk mengatur tampilan ke "blokir" sebelum penentuan posisi, jika tidak $ dialog.height () akan menjadi 0 dan modal tidak akan terpusat sepenuhnya.

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

Ini yang saya lakukan untuk aplikasi saya. Jika Anda melihat kelas-kelas berikut dalam file bootstrap.css. -Modal-dialog memiliki padding default 10px dan layar @media dan (min-lebar: 768px) .modal-dialog memiliki padding atas diatur ke 30px. Jadi dalam file css khusus saya, saya mengatur padding top saya menjadi 15% untuk semua layar tanpa menentukan lebar layar media. Semoga ini membantu.

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

Cara terbaik yang saya temukan untuk semua browser HTML5:

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>

// Gaya

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

Parameter teratas sedang diganti dalam .modal.fade.in untuk memaksa nilai yang ditetapkan dalam deklarasi khusus Anda, tambahkan !importantkata kunci setelah atas. Ini memaksa browser untuk menggunakan nilai itu dan mengabaikan nilai lain untuk kata kunci. Ini memiliki kelemahan yang Anda tidak dapat menimpa nilai di tempat lain.

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

Pada Bootstrap 4 kelas berikut telah ditambahkan untuk mencapai ini untuk Anda tanpa JavaScript.

modal-dialog-centered

Anda dapat menemukan dokumentasinya di sini .

Terima kasih vd untuk menunjukkan Anda perlu menambahkan keduanya .modal-dialog-centered ke .modal-dialog untuk memusatkan modal secara vertikal.

Ini bekerja untuk saya dengan sempurna:

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

URL Demo lengkap : https://codepen.io/dimbslmh/full/mKfCc

kamu bisa memakai:

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

untuk memusatkannya secara vertikal dan horizontal.

Karena sebagian besar jawaban di sini tidak berfungsi, atau hanya berfungsi sebagian:

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

Anda harus menggunakan pemilih [style] untuk hanya menerapkan style pada modal yang saat ini aktif, bukan semua modals. .inakan sangat bagus, tetapi tampaknya akan ditambahkan hanya setelah transisi selesai yang terlambat dan membuat beberapa transisi yang sangat buruk. Untungnya bootstrap selalu menerapkan atribut style pada modal sama seperti itu mulai menunjukkan jadi ini agak hacky, tetapi berfungsi.

The :not([style='display: none;'])porsi solusi untuk bootstrap tidak benar menghapus atribut style dan bukan pengaturan tampilan gaya tidak ada ketika Anda menutup dialog.

Anda dapat mencapai pusat penyelarasan vertikal pada modal Bootstrap 3 seperti itu:

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

dan tambahkan kelas css ini ke wadah "modal-dialog"

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

contoh kerja jsFiddle: http://jsfiddle.net/U4NRx/

Cara paling bersih dan paling sederhana untuk melakukan ini adalah dengan menggunakan Flexbox! Berikut ini akan secara vertikal menyelaraskan modal Bootstrap 3 di tengah layar dan jauh lebih bersih dan lebih sederhana daripada semua solusi lain yang diposting di sini:

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

CATATAN: Meskipun ini adalah solusi paling sederhana, ini mungkin tidak berfungsi untuk semua orang karena dukungan browser: http://caniuse.com/#feat=flexbox

Sepertinya (per biasa) IE tertinggal. Dalam kasus saya, semua produk yang saya kembangkan untuk diri sendiri atau untuk klien adalah IE10 +. (Tidak masuk akal bisnis untuk berinvestasi waktu pengembangan mendukung versi IE yang lebih lama ketika itu dapat digunakan untuk benar-benar mengembangkan produk dan mengeluarkan MVP lebih cepat). Ini tentu bukan kemewahan yang dimiliki setiap orang.

Saya telah melihat situs yang lebih besar mendeteksi apakah flexbox didukung atau tidak dan menerapkan kelas pada bagian halaman - tetapi tingkat teknik front-end itu cukup kuat, dan Anda masih perlu mundur.

Saya akan mendorong orang untuk merangkul masa depan web. Flexbox luar biasa dan Anda harus mulai menggunakannya jika Anda bisa.

PS - Situs ini benar-benar membantu saya memahami flexbox secara keseluruhan dan menerapkannya pada semua use case: http://flexboxfroggy.com/

EDIT: Dalam kasus dua modal pada satu halaman, ini harus berlaku untuk .modal.in

Keuntungan:

• konten modal dapat diakses bahkan ketika lebih tinggi dari perangkat
• tidak digunakan display:table-cell(itu tidak dimaksudkan untuk tata letak)
• tidak memerlukan modifikasi apa pun pada modal Bootstrap 3 default markup
• positioning adalah CSS murni. JS ditambahkan untuk menutup modal pada klik / ketuk di bawah dan di atasnya
• Saya menyertakan un-prefixed SCSSuntuk mereka yang menggunakan gulpataugrunt

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

Catatan : Saya bermaksud memperbarui jawaban ini dengan spesifikasi Bootstrap 3. terbaru. Untuk solusi Bootstrap 4, lihat jawaban ini (untuk saat ini kurang lebih sama, tetapi pada waktunya mereka mungkin berbeda). Jika Anda menemukan bug atau masalah dengan itu, beri tahu saya dan saya akan memperbarui. Terima kasih.

Bersih, tidak diawali SCSS(untuk digunakan dengan gulp/ 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);
  }
}

Solusi CSS lainnya. Tidak berfungsi untuk munculan yang lebih besar dari port tampilan.

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

Di .modal-dialogkelas menimpa posisi ke absolut (dari relatif) dan memusatkan kontenright:0, left: 0

Dalam .modal.fade .modal-dialog , .modal.in .modal-dialogmengatur animasi transisi lebih topdari pada pada menerjemahkan.

margin-topmemindahkan popup sedikit di bawah tengah jika popup kecil dan jika popup panjang, modalnya macet dengan header. Karenanyamargin-top:0, margin-bottom:0

Perlu lebih menyempurnakannya.

Bagi mereka yang menggunakan bootstrap angular-ui dapat menambahkan kelas di bawah ini berdasarkan info di atas:

Catatan: Tidak ada perubahan lain yang diperlukan dan itu akan menyelesaikan semua modals.

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

Tidak perlu kita javascript. Boostrap modal menambahkan kelas .in ketika muncul. Cukup modifikasi kombinasi kelas ini dengan modalclassName.fade.in dengan flex css dan Anda selesai.

tambahkan css ini untuk memusatkan modal Anda secara vertikal dan horizontal.

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

Pilihan saya, hanya sedikit CSS: (TIDAK bekerja di IE8)

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

Anda dapat bermain dengan aturan pertama untuk mengubah bagaimana modal muncul.

Menggunakan: Bootstrap 3.3.4

Cukup tambahkan CSS berikut untuk Anda yang sudah ada, Ini berfungsi dengan baik untuk saya

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

Berdasarkan jawaban Arany , tetapi juga memperhitungkan gulir halaman.

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

Saya pikir ini adalah solusi CSS murni yang sedikit lebih bersih daripada solusi Rens de Nobel. Juga ini tidak mencegah dari menutup dialog dengan mengklik di luarnya.

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

Cukup tambahkan beberapa kelas CSS ke wadah DIV dengan kelas .modal-dialog untuk mendapatkan spesifisitas yang lebih tinggi daripada bootstraps CSS, misalnya .centered.

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>

Dan membuat wadah .modal-dialog.centered ini tetap dan diposisikan dengan benar.

CSS

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

Atau bahkan lebih sederhana menggunakan flexbox.

CSS

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

Ini berfungsi di BS3, tidak diuji dalam v2. Ini memusatkan modal secara vertikal. Perhatikan bahwa itu akan transisi di sana - jika Anda ingin hanya muncul di posisi edit transitionproperti CSS untuk.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)
    });

Ini mengambil jawaban Arany dan membuatnya berfungsi jika modal lebih tinggi dari ketinggian layar:

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

Untuk menambahkan pemusatan modal vertikal ke bootstrap modal.js saya menambahkan ini di akhir Modal.prototype.showfungsi:

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

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

Untuk membuat Modal secara vertikal Align Middle All dialog.

/* Catatan:

1.Even Anda tidak perlu menetapkan pemilih, itu akan menemukan semua modal dari dokumen dan membuatnya menjadi vertikal tengah

2.Untuk menghindari beberapa modal tertentu untuk menjadi pusat Anda dapat menggunakan: bukan pemilih dalam acara klik

* /

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

Dari Milan Pandya

Gunakan skrip sederhana ini yang memusatkan modals.

Jika mau, Anda dapat mengatur kelas khusus (mis: .modal.modal-vcenter alih-alih .modal) untuk membatasi fungsionalitas hanya untuk beberapa modals.

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

Juga tambahkan perbaikan CSS ini untuk spasi horizontal modal; kami menunjukkan gulir pada modals, gulungan tubuh disembunyikan secara otomatis oleh Bootstrap:

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

CSS jawaban lain untuk pertanyaan ini ...
Solusi ini menggunakan CSS hanya untuk mencapai efek yang diinginkan sambil tetap mempertahankan kemampuan untuk menutup modal dengan mengklik di luar itu. Ini juga memungkinkan Anda untuk mengatur .modal-contentketinggian dan lebar maksimum sehingga pop-up Anda tidak akan tumbuh di luar viewport. Sebuah gulir akan muncul secara otomatis ketika konten tumbuh di luar ukuran modal.

Catatan:
Bootstrap yang disarankan .modal-dialog divharus dihilangkan agar ini berfungsi dengan baik (tampaknya tidak merusak apa pun). Diuji di Chrome 51 dan IE 11.

Kode CSS:

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

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

EDIT: The .modal-dialogclass memungkinkan Anda untuk memilih apakah atau tidak pengguna dapat menutup modal dengan mengklik di luar modal itu sendiri. Sebagian besar modem memiliki tombol 'tutup' atau 'batal' yang eksplisit. Ingatlah ini saat menggunakan solusi ini.

Solusi terbaik untuk memusatkan modal Anda dengan lebar dan tinggi adalah, dalam css tambahkan dan dalam modal tambahkan ini 'memusatkan' sebagai kelas ..

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

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

Berpusat vertikal Tambahkan .modal-dialog-centered ke .modal-dialog untuk memusatkan modal secara vertikal

Luncurkan modal demo

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