Bootstrap 3 pusat posisi vertikal modal

270

Ini adalah pertanyaan dua bagian:

  1. Bagaimana Anda bisa memposisikan modal secara vertikal di tengah ketika Anda tidak tahu ketinggian yang tepat dari modal?

  2. Mungkinkah modal terpusat dan meluap: otomatis di badan modal, tetapi hanya jika modal melebihi ketinggian layar?

Saya sudah mencoba menggunakan ini:

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

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

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

Ini memberi saya hasil yang saya butuhkan ketika konten jauh lebih besar dari ukuran layar vertikal, tetapi untuk konten modal kecil itu cukup banyak tidak dapat digunakan.

scooterlord
sumber
1
@Heiken untuk beberapa alasan ini membuat saya melompat ke bawah di layar, saya menggunakan chrome
Sven van den Boogaart

Jawaban:

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

Dan sesuaikan kelas .fade sedikit untuk memastikan itu muncul dari batas atas jendela, bukan pusat

Finik
sumber
Saya benar-benar mengesampingkan ini secara tidak sengaja, terima kasih telah menunjukkan itu benar-benar bekerja di belakang layar.
Dorian
Ini mungkin adalah cara terbaik untuk memusatkan secara vertikal bukan hanya modal bootstrap tetapi yang lainnya. css-tricks.com/centering-in-the-unknown
Mark S
4
Saya mengklarifikasi bahwa ini tidak berfungsi dengan baik di Seluler. Karena definisi ": setelah" memiliki ketinggian 100% dan dapat secara otomatis memindahkan modal ke bawah halaman. Saya baru saja menyelesaikan mendeklarasikan .modal {display: flex! Penting;} .modal-dialog {margin: auto}. 92,97% orang sudah memiliki dukungan menggunakan properti CSS ini, namun untuk suporte umum dapat menggunakan JavaScript untuk mengatur margin.
Walter Chapilliquen - wZVanG
21
Benar-benar hebat, tetapi saya akan merekomendasikan menggunakannya hanya di atas 768px dan meninggalkan pengaturan default di ponsel. Posisi teratas adalah yang terbaik untuk modals ketika ketinggian layar kecil. Saya juga telah menyesuaikan animasi untuk membuatnya muncul dari pusat, di sini contoh kerja jika ada yang membutuhkannya: codepen.io/anon/pen/zGBpNq
bwitkowicz
Solusi ini menggeser jendela modal ke kanan untuk 2px, menyebabkan: sebelum elemen. Tapi ini bisa diselesaikan dengan menambahkan kode yang sama untuk: after
Cypher
146

1. Bagaimana Anda bisa memposisikan modal secara vertikal di tengah ketika Anda tidak tahu ketinggian yang tepat dari modal?

Untuk benar-benar memusatkan Modal Bootstrap 3 tanpa menyatakan tinggi, Anda harus terlebih dahulu menimpa CSS Bootstrap dengan menambahkan ini ke style sheet Anda:

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

Ini akan memposisikan modal-dialog sudut kiri atas di tengah jendela.

Kami harus menambahkan kueri media ini atau modal-kiri salah pada perangkat kecil:

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

Sekarang kita perlu menyesuaikan posisinya dengan JavaScript. Untuk melakukan itu kita beri elemen margin atas dan kiri negatif sama dengan setengah dari tinggi dan lebarnya. Dalam contoh ini kita akan menggunakan jQuery karena tersedia dengan 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);
        }
    });
});

Pembaruan (01/10/2015):

Menambahkan jawaban Finik . Kredit untuk Centering di Unknown .

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

Perhatikan margin negatifnya, kan? Ini menghilangkan ruang yang ditambahkan oleh inline-block. Ruang itu menyebabkan modal untuk melompat ke bagian bawah halaman @ lebar media <768px.

2. Mungkinkah modal terpusat dan meluap: otomatis di badan modal, tetapi hanya jika modal melebihi ketinggian layar?

Ini dimungkinkan dengan memberikan modal-tubuh overflow-y: auto dan max-height. Ini membutuhkan sedikit usaha untuk membuatnya berfungsi dengan baik. Mulai dengan menambahkan ini ke style sheet Anda:

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

Kami akan menggunakan jQuery lagi untuk mendapatkan tinggi jendela dan mengatur max-tinggi modal-konten terlebih dahulu. Maka kita harus mengatur max-height dari modal-body, dengan mengurangkan konten modal dengan modal-header dan modal-footer:

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

Anda dapat menemukan demo yang berfungsi di sini dengan Bootstrap 3.0.3: http://cdpn.io/GwvrJ EDIT: Saya sarankan menggunakan versi yang diperbarui sebagai gantinya untuk solusi yang lebih responsif: http://cdpn.io/mKfCc

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

(Diperbarui 30/11/2015 http://cdpn.io/mKfCc dengan suntingan di atas)

dimbslmh
sumber
1
jawaban dan posting yang luar biasa! Namun, dapatkah ini juga dianimasikan? Ini bekerja sangat baik ketika baru saja muncul, tetapi bagaimana dengan animasi? Saya sedang bekerja dan tidak bisa mengujinya atm, tapi saya ingin melihat hasilnya
scooterlord
Anda dapat menambahkan kelas fade pada modal. Lihat solusi saya yang diperbarui di cdpn.io/mKfCc
dimbslmh
Walaupun tampaknya bekerja dengan baik pada codepen, saya tidak bisa membuatnya bekerja pada proyek saya. Saya kira Anda hanya perlu menambahkan kode dan tidak mengganti sesuatu kan?
scooterlord
1
Hai lagi! Memperhatikan hal berikut. Ketika modal pertama pertama kali dibuka, margin kanan salah sampai Anda mengubah ukuran satu kali. Ad ides yang satu ini?
scooterlord
1
@bernie Saya membuat tangkapan layar di Browserstack dengan garpu codepen saya yang memiliki modal pendek terbuka pada document.ready: browserstack.com/screenshots/... Browserstack tidak mendukung v9.3.x untuk tangkapan layar (belum), tapi saya pikir sesuatu yang mirip dengan apa yang Anda gambarkan terjadi pada iOS 6.0 (Lihat tangkapan layar iPad 3 (6.0) (Potret)). Mungkin ini adalah bug lama yang telah kembali di v9.3.2. Jika Anda ingin, Anda dapat mengajukan laporan bug di forums.developer.apple.com/community/safari-and-web/…
dimbslmh
37

Solusi saya

.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>
Brian J. Hakim
sumber
Anda harus menggunakan padding-top. margin akan menghentikan aksi tutup ketika Anda mengklik pada overlay
anvd
2
Margin set atas ke 25% membutuhkan modal harus 50% tinggi.
pemberontakan
28

Itu bisa dengan mudah diperbaiki 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);
}

Dengan awalan

.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);
}
Mo.
sumber
2
Ini mencegah latar belakang diklik karena ketinggian 100vh. Tidak apa-apa untuk pengaturan "backdrop: 'statis'".
ianstigator
penyebab ini memudar masalah animasi
Viswanath Lekshmanan
23

Saya datang dengan solusi css murni! Itu css3, yang berarti ie8 atau lebih rendah tidak didukung, tetapi selain itu ini diuji dan bekerja pada ios, android, ie9 +, chrome, firefox, desktop safari ..

Saya menggunakan css berikut:

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

Ini biola. http://codepen.io/anon/pen/Hiskj

..memilih ini sebagai jawaban yang benar karena tidak ada javascript ekstra berat yang membuat browser bertekuk lutut jika ada lebih dari satu modals.

scooterlord
sumber
8
Inti dari menggunakan JavaScript adalah untuk mendapatkan ketinggian modal yang tidak diketahui . Solusi Anda memiliki tinggi tetap 80%, yang tidak menjawab pertanyaan Anda sendiri: "Bagaimana Anda bisa memposisikan modal secara vertikal di tengah ketika Anda tidak tahu ketinggian yang tepat dari modal ?"
dimbslmh
... dimensi tinggi diatur untuk membatasi ketinggian modal MAKSIMUM dibandingkan dengan ketinggian layar. Namun, persentase terjemahan diatur sesuai dengan tinggi ISI.
scooterlord
3
Jika Anda ingin mendapatkan solusi yang tidak mengubah ukuran kotak modal coba solusi css berikut juga: tweaks.klickagent.ch/#30.05.2014_TwitterBootstrapCenterModal
klickagent.ch
Sangat bagus juga. Namun, ia memiliki pendekatan yang berbeda dari yang saya jelaskan. Dalam kasus Anda seluruh modal bergerak naik dan turun, ketika dalam kasus saya elemen overflown dibuat. Sangat bagus! Saya suka itu!
scooterlord
Ini membutuhkan ketinggian yang harus ditetapkan .. Yang tidak persis sama dengan yang diminta pengguna.
pemberontakan
21

Jika Anda baik-baik saja dengan menggunakan flexbox maka ini akan membantu menyelesaikannya.

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

.modal-content {
  margin: 0 auto;
}
xiaolin
sumber
7
Saya menemukan jawaban ini sangat bagus untuk saya. Namun, jika Anda ingin membiarkan pengguna menutup modal dengan mengklik latar belakang itu, pastikan untuk menambahkan pointer-events: noneuntuk .modal-dialogdan pointer-events: autountuk .modal-content. Karena .modal-dialog {height: 100%}menutupi seluruh kolom di atas dan di bawah modal dan menonaktifkan pengguna untuk mengklik latar belakang pada area itu.
laksanakan
dikombinasikan dengan saran dari @ChingTingWu, paling efektif
strider
Dan di mana saran @ChingTingWu?
giovannipds
1
ChingTingWu tampaknya telah berubah menjadi @wuct
xiaolin
1
@giovannipds Ups, saya telah mengganti nama nama pengguna saya, karena lebih pendek dan lebih mudah untuk ditandai. Maaf telah membingungkan :)
laksanakan
20

Solusi saya:

.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%);
}
Vadim
sumber
Ini tampaknya bekerja dengan baik dengan Bootstrap 3. Mengapa ini bukan jawaban yang diterima? Ini jauh lebih sederhana (arahan 4 css) daripada yang lain.
danielricecodes
@danielricecodes Saya akan mengambil bidikan dan menganggap itu karena masalah dengan unit viewport. . Jawaban yang diajukan oleh scooterlord menyarankan kompatibilitas bahkan dengan IE9, dan iOs, yang menyarankan saya untuk khawatir. Jika Anda memeriksa halaman masalah canIuse, Anda akan melihat bahwa ada masalah dengan iOs dan IE10 dan yang lebih lama. Bukannya saya setuju atau tidak bahwa ini adalah jawaban yang benar. Saya hanya menunjukkan mengapa mungkin ini tidak dipilih sebagai jawabannya.
Malavos
1
Ada masalah dengan pendekatan ini adalah ketika modal memiliki konten yang dapat digulir (lebih banyak konten daripada yang cocok di jendela)
Steven Pribilinskiy
Ini harus menjadi jawaban yang diterima. Sejauh ini hanya ini solusi yang berfungsi untuk saya. Terima kasih untuk ini.
shifu
Ini tidak akan berfungsi jika konten modal Anda lebih besar dari ketinggian layar (jika modal Anda harus menggulir)
Brett Gregson
18

Semua yang saya lakukan dalam kasus saya adalah mengatur Top di css saya mengetahui ketinggian modal

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

di css saya set

#myModal{
    height: 400px;
    top: calc(50% - 200px) !important;
}
Nerdroid
sumber
1
Sebagai noob to css, jawaban ini tampaknya paling tidak menakutkan dan menyelesaikan pekerjaan
Oded Ben Dov
2
Ini tidak menjawab bagian pertama dari pertanyaan: "..ketika Anda tidak tahu persis tinggi modal?"
natec
15

Menambahkan css sederhana ini juga berfungsi.

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

.modal-content {
  margin: auto !important;
  height: fit-content !important;
}
Ninja420
sumber
Apa itu konten yang sesuai?
Marc Roussel
12

Ada cara termudah untuk melakukan ini menggunakan css:

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

Itu dia. Perhatikan bahwa itu hanya perlu diterapkan ke.modal-dialog div wadah.

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

Dario Ferrer
sumber
7
Tidak responsif di ponsel karena lebar dan tinggi tetap.
ianstigator
Jawaban Anda mengasumsikan bahwa setiap perangkat memiliki resolusi layar yang sama
Patricio Rossi
Tidak ada laki-laki. Saya berasumsi Anda memahami contoh ini dan Anda mampu menyesuaikannya untuk setiap kasus.
Dario Ferrer
Di Bootstrap v3.3.0 berjalan sukses, Terima kasih
Amin Ghaderi
11

Memperluas pada jawaban luar biasa @ Finik, perbaikan ini hanya berlaku untuk perangkat non-seluler. Saya menguji di IE8, Chrome, dan Firefox 22 - ini bekerja dengan konten yang sangat panjang atau pendek.

.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;
}
roo2
sumber
8

Solusi paling universal yang saya tulis. Dynamicaly menghitung dengan tinggi dialog. (Langkah selanjutnya bisa menghitung ulang ketinggian dialog pada ukuran jendela.)

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

});
Jan Renner
sumber
7

Temukan solusi sempurna dari sini

$(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);
    });
});
Ismail Farooq
sumber
1
Terima kasih. Sempurna untuk saya dengan satu perubahan: dialog.css ("margin-top", Math.max (0, ($ (dokumen) .scrollTop () + (($ (jendela) .height () - dialog.height ()) / 2))));
Viacheslav Soldatov
4
$('#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
    }
});
Ray Suelzer
sumber
Dengan beberapa tweak pada pemilih, ini bekerja seperti pesona. @$modal = $('.fade.in'); modalBox = @$modal.find('.modal-content'); initModalHeight = modalBox.outerHeight(); userScreenHeight = @$modal.outerHeight()
juliangonzalez
4

Berikut ini satu-satunya metode css lain yang berfungsi dengan baik dan didasarkan pada ini: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

kelancangan:

.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;
    }
}
phazei
sumber
Seperti dengan transformsolusi lain , masalah muncul ketika modal memiliki konten yang dapat digulir (lebih banyak konten daripada yang cocok di jendela)
Steven Pribilinskiy
3

saya telah mengunduh dialog bootstrap3 dari link di bawah ini dan memodifikasi fungsi terbuka di bootstrap-dialog.js

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

Kode

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;
} 
pengguna3085452
sumber
Berikut ini adalah modifikasi yang dapat diterapkan dalam kode Anda sendiri, tanpa harus mengubah sumber BSDialog asli: gist.github.com/mahemoff/8ff6d3782d2da6f9cbb3 (hanya beberapa modifikasi pada JS, juga ditulis dalam kopi tetapi Anda mendapatkan idenya).
mahemoff
3

Ini bekerja untuk saya:

.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;
}
Liam
sumber
2

Coba sesuatu seperti ini:

.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
    } 
Sergey Briskin
sumber
1
Ini bisa bekerja cukup baik tetapi mod bootstrap memiliki yang absolut, di dalam diperbaiki, di dalam ini dan itu ...: /
scooterlord
1
Apa yang harus dilakukan kelas-kelas ini dengan moda Bootstrap / Bootstrap?
lofihelsinki
1

Anda mungkin ingin memeriksa kumpulan metode ini untuk pemusatan absolut div: http://codepen.io/shshaw/full/gEiDt

Sevron
sumber
1
Hm, dikatakan di dalam peringatan bahwa Anda harus menyatakan ketinggian, yang bukan yang saya cari
scooterlord
1

Cara yang sederhana. Bekerja untukku. 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>    
Tuyen Cao
sumber
1

solusi lain yang akan menetapkan posisi yang valid untuk setiap modal yang terlihat pada window.resizeacara dan pada 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);
lenybernard
sumber
1
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);
pengguna3477026
sumber
1

Saya tahu ini agak terlambat, tetapi saya menambahkan jawaban baru sehingga tidak hilang di kerumunan. Ini adalah solusi lintas-desktop-seluler-peramban yang bekerja di mana-mana sebagaimana mestinya.

Itu hanya perlu modal-dialoguntuk dibungkus di dalam modal-dialog-wrapkelas dan perlu memiliki penambahan kode berikut:

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

Dialog mulai berpusat dan dalam kasus konten besar hanya tumbuh secara vertikal sampai muncul scrollbar.

Ini biola yang berfungsi untuk kesenangan Anda!

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

scooterlord
sumber
1

Ini cukup lama dan secara khusus meminta solusi menggunakan Bootstrap 3, tetapi bagi siapa pun yang bertanya-tanya: dari Bootstrap 4 ada solusi bawaan yang disebut .modal-dialog-centered. Inilah masalahnya: https://github.com/twbs/bootstrap/issues/23638

Jadi menggunakan v4 Anda hanya perlu menambahkan .modal-dialog-centeredke .modal-dialogpusat modal secara vertikal:

<!-- 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>
Tobold
sumber
0

Pertimbangkan untuk menggunakan plugin bootstrap-modal yang ditemukan di sini - https://github.com/jschr/bootstrap-modal

Plugin akan memusatkan semua modals Anda

Jeremy Lynch
sumber
... sayangnya saya sudah mencobanya tetapi tidak bisa membuatnya berfungsi dengan baik - setidaknya tidak dengan kode SAYA. Saya kira semua orang perlu menyesuaikan ini dengan kebutuhannya! Terima kasih atas jawabannya.
scooterlord
0

Untuk pemusatan, saya tidak mendapatkan apa dengan solusi yang terlalu rumit. bootstrap sudah memusatkannya secara horizontal untuk Anda, jadi Anda tidak perlu dipusingkan dengan ini. Solusi saya hanya menetapkan margin atas hanya menggunakan jQuery.

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

Saya telah menggunakan acara loaded.bs.modal karena saya memuat konten dari jarak jauh, dan menggunakan event yang ditampilkan.ba.modal menyebabkan perhitungan ketinggian menjadi salah. Tentu saja Anda dapat menambahkan acara untuk ukuran jendela jika Anda membutuhkannya agar responsif.

Scott Flack
sumber
jika modalnya cukup besar, dapat menyebabkan masalah
scooterlord
0

Cara yang sangat sangat mudah untuk mencapai konsep ini dan Anda akan mendapatkan modal selalu di moddle layar Anda dengan css sebagai aliran: http://jsfiddle.net/jy0zc2jc/1/

Anda hanya perlu modalmenampilkan kelas sebagai tabel dengan mengikuti css:

display:table

dan modal-dialog sebagaidisplay:table-cell

lihat contoh kerja penuh dalam biola yang diberikan

Innodel
sumber
Saya tidak melihat modal sama sekali
ThaDafinser
Satu-satunya yang saya lihat (di Google Chrome) adalah ikon palang merah dan latar belakang
ThaDafinser
Bukan scrollabel ketika modal memiliki lebih banyak konten daripada yang cocok di jendela
Steven Pribilinskiy
0

itu tidak rumit.

silakan coba ini:

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

Dalam bentuk tanaman seluler mungkin terlihat sedikit berbeda, inilah kode saya.

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