Jendela modal Bootstrap yang berpusat secara vertikal

181

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);
        }
    })
pengguna2613813
sumber
Coba timpa .modal.fade.injuga
haim770
Coba dengan ini: github.com/jschr/bootstrap-modal
John Magnolia
3
Coba ini zerosixthree.se/… Saya menggunakan: .modal.fade.in {top: 50%; transform: translateY (-50%); }
jowan sebastian
Menambahkan solusi flexbox (yang translateY(-50%)membuat modal teratas tidak dapat diakses ketika konten modal lebih tinggi dari ketinggian perangkat).
tao
Pada bootstrap 4 modal-dialog-centered ditambahkan bahwa ini tidak lagi diperlukan. Harap tinjau jawaban itu di bawah.
jcaruso

Jawaban:

258

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;
}
RNobel
sumber
Dengan solusi ini, karena ketinggian: 100%; dan lebar: 100%; Anda tidak dapat menutup modalnya dengan mengklik di luar modals. Bisakah Anda memikirkan perbaikan untuk @Rens de Nobel ini?
pcatre
1
Ok solusi ini tampaknya bekerja dengan baik (kecuali itu menghentikan saya menutup modals dengan mengkliknya). Tapi entah bagaimana itu membuat beberapa tes e2e saya gagal busur derajat (dan saya tidak dapat menemukan alasannya, tidak terasa seperti bug pada ini). Pokoknya saya akan kembali ke jawaban javascript jadi saya tidak kehilangan lebih banyak waktu dalam hal ini. Tapi seperti yang saya katakan, ini tampaknya bekerja dengan baik, hanya memperingatkan orang yang melakukan tes e2e dengan busur derajat yang harus diwaspadai.
pcatre
3
@pcatre, terima kasih atas tipnya! Saya telah memperbarui kode dengan perbaikan untuk ini. Pengaturan pointer-events: none; pada alignment-class melakukan trik. Diuji di IE11, Chrome Terbaru dan Firefox dan iOS Safari.
RNobel
4
Tidak yakin apakah ini telah diperbarui sejak komentar pengguna mengatakan itu tidak berfungsi, pada klik elemen modal dalam, tapi ini 100% berfungsi untuk saya seperti yang sekarang, menggunakan contoh di Fiddle di atas. Terima kasih banyak atas bantuan Anda dan semua komentar di atas.
Michael G
2
Pada bootstrap 4 modal-dialog-centered ditambahkan bahwa ini tidak lagi diperlukan. Harap tinjau jawaban itu di bawah.
jcaruso
94

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));
Arany
sumber
6
Yang ini sempurna! Hanya alih-alih $ (dokumen) .height () benar untuk menggunakan $ (window) .height () di baris 4. Plus saya akan mengubah baris terakhir ke: $('.modal:visible').each(centerModal);
Denis Chmel
Ini bekerja dengan baik untuk saya, terima kasih. ketika kita menggunakan kode ini, kita juga harus mengatur padding atas dan bawah dari modal-dialog ke 0px, untuk menyempurnakan pemusatan.
mina morsali
Ini rusak jika modalnya lebih tinggi dari ketinggian jendela. Jadi saya menambahkan baris berikut tepat sebelum mengatur margin-atas dari dialog: if(offset < 0) offset = 0; Saya menempelkan seluruh blok ke dalam case jawaban yang tidak jelas!
jetlej
Saya menambahkan beberapa perubahan lebih lanjut untuk menjaga margin atas sama dengan margin bawah modal, dalam jawaban di bawah ini
jetlej
Sempurna, tidak ada $ (ini) .css ('display', 'block'); sepanjang waktu dan berpikir mengapa ketinggiannya 0.
Jānis Gruzis
81

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%;
}
pengguna1279047
sumber
6
ini hanya bekerja untuk kotak kecil alret, dan tidak bekerja untuk kotak besar
mina morsali
Anda bisa menerapkannya ke modals kecil:.modal-dialog.modal-sm { padding-top:15%; }
Dunc
61

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;
}
taha shahid
sumber
2
Saya menyukai solusi ini, sangat bersih. Tidak yakin tentang desktop atau versi Safari yang lebih lama tetapi tampaknya baik-baik saja di iOS 8.
Nicolas Galler
1
Ya saya setuju dengan @NicolasGaller. Ini bekerja dengan baik untuk saya juga. Saya menguji di Chrome dan Firefox. Ini bekerja dengan baik.
Manjunath Reddy
2
Ini adalah peningkatan progresif css hanya besar. Tidak diperlukan js dan browser apa pun yang tidak mendukung flexbox akan mendapatkan penempatan modal bootstrap default.
Craig Harshbarger
Tutup, tetapi gagal untuk menutup modal ketika ada lebih dari satu di halaman. Lihat jawaban saya di bawah ini untuk memperbaikinya.
Robert McKee
1
Update: Menambahkan align-items: center;ke body.modal-open .modaltampaknya bekerja.
bernie
20
<!-- 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;
}
pengguna3389
sumber
3
Ini adalah jawaban universal. Saya tidak tahu mengapa tidak ada yang memilih.
Csaba Toth
3
Saya telah melalui setidaknya 4 entri SO masing-masing dengan selusin proposal. BTW, pada usia HTML5 ini harus dibangun dalam fungsionalitas untuk beberapa kerangka kerja setidaknya. Alih-alih juggling.
Csaba Toth
1
Perhatikan juga: jika Anda mengatakan lebar: 100% untuk gaya tabel, Anda akan mendapatkan pemusatan horizontal (jika modal tidak disembunyikan melimpah).
Csaba Toth
1
Jawaban terbaik sejauh ini. Ini menciptakan bilah gulir tetapi Anda dapat menonaktifkannya dengan membuat .modal-open .modal {overflow-y: hidden; }
Christophe
14

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%;
}
Alexander Varwijk
sumber
Ini mencegah saya dari menutup modal ketika mengklik pada latar belakang tentang modal.
Scott Simpson
13

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.

jcaruso
sumber
1
Ini adalah jawaban terbaik untuk bootstrap 4.
broc.seib
dengan menambahkan modal-dialog dan modal-dialog-centered memiliki hasil yang lebih baik
vd
1
@vd itu mengerti mengingat dokumentasi mengatakan "Tambahkan .modal-dialog-centered ke .modal-dialog untuk memusatkan modal secara vertikal." Saya akan memperbarui jawaban saya untuk mencerminkan itu juga bagi mereka yang tidak menangkapnya.
jcaruso
12

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

AmirHossein Manian
sumber
11

kamu bisa memakai:

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

untuk memusatkannya secara vertikal dan horizontal.

Arya Armon
sumber
2
Ini adalah "bagaimana cara memusatkan sesuatu" dengan CSS tanpa menggunakan Flex. Fakta bahwa konteksnya adalah Bootstrap atau modal harus tidak relevan. Semua jawaban lain terlalu berlebihan.
ESR
1
Dengan metode ini, jika modal lebih tinggi dari ketinggian layar perangkat, bagian atas modal menjadi tidak dapat diakses.
tao
11

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.

Robert McKee
sumber
Terima kasih banyak. Ini sebenarnya satu-satunya yang bekerja pada 2016.
AlexioVay
4 tahun telah berlalu. Masih bermanfaat. Terima kasih sobat!
Hassan Nomani
8

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/

EGurelli
sumber
Bagaimana tepatnya dialog ini dipusatkan secara vertikal?
gkalpak
Berfungsi bagus di sebagian besar tempat, tetapi tidak bekerja di aplikasi html5 terbungkus lebih rendah dari Android 4.4.
Josh
3
Modal saya turun ke halaman dengan ini
Dorian
1
YA! Saya menggunakan: .modal.fade.in {top: 50%; transform: translateY (-50%); }
jowan sebastian
Ubah saja 50% menjadi 15% dan kemudian dialog akan berada di tengah jendela. .modal-vertical-centered {transform: translate (0, 15%)! penting; -ms-transform: terjemahkan (0, 15%)! penting; / * IE 9 / -webkit-transform: translate (0, 15%)! Penting; / Safari dan Chrome * /}
Haimei
8

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

Greg Blass
sumber
Ini berfungsi sebaliknya, tetapi animasi penutup tidak terlihat bagus.
user2061057
Haruskah bisa menyelesaikan animasi dengan transisi CSS3?
Greg Blass
7

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

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);
  }
}
tao
sumber
2
IMO solusi terbaik.
Radmation
3

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.

pravin
sumber
3

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;
}
Jyotirmoy Pan
sumber
3

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%;
}
Tidak ada
sumber
2

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

John Bernardsson
sumber
2

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;
}
Shankar Prakash G
sumber
2

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));
mathieu
sumber
2

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;
}
Vit Koumar
sumber
Versi flexbox ini tidak berfungsi seperti yang diharapkan. Menguji Chrome terbaru (52.0.x), dialog .modal terpusat dengan benar tetapi interaksi kontennya tampak membeku di tempat lama (anehnya). Namun, Anda dapat mencoba menggunakan teknik ini langsung pada .modal-dialog (bukan pada .modal), dan dengan beberapa properti lainnya, sepertinya berhasil. =)
giovannipds
2

.modal.in .modal-dialog {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Michael Oxborrow
sumber
1

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);
});
gpcola
sumber
1
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)
    });
Tomtom
sumber
Bisakah Anda mengklarifikasi apa fungsi 'e' dalam jawaban Anda?
Michael Butler
1

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);
});
jetlej
sumber
Hey @jetlej kenapa kamu tidak mengedit jawaban Arany untuk memasukkan ini? Anda memecahkan bug besar pada kodenya.
pcatre
@pcatre - Saya tidak tahu saya bisa mengirim suntingan! Terima kasih telah menunjukkan itu
jetlej
1

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});
andersra
sumber
Tidak akan berfungsi dengan baik jika dialog berubah ketinggian sekali ditampilkan, karena pengubahan ukuran halaman atau hal-hal di dalamnya mengembang / runtuh.
Dirbaio
0

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

pengguna3690101
sumber
0

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;
}
Rakesh Vadnal
sumber
0

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.

dsanchez
sumber
0

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%;
   }
yogesh mhetre
sumber
0

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>
Tayyab Roy
sumber