Ini adalah pertanyaan dua bagian:
Bagaimana Anda bisa memposisikan modal secara vertikal di tengah ketika Anda tidak tahu ketinggian yang tepat dari modal?
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.
css
twitter-bootstrap
modal-dialog
center
scooterlord
sumber
sumber
Jawaban:
Dan sesuaikan kelas .fade sedikit untuk memastikan itu muncul dari batas atas jendela, bukan pusat
sumber
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:Ini akan memposisikan modal-dialog sudut kiri atas di tengah jendela.
Kami harus menambahkan kueri media ini atau modal-kiri salah pada perangkat kecil:
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.
Pembaruan (01/10/2015):
Menambahkan jawaban Finik . Kredit untuk Centering di Unknown .
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: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:
Anda dapat menemukan demo yang berfungsi di sini dengan Bootstrap 3.0.3: http://cdpn.io/GwvrJEDIT: Saya sarankan menggunakan versi yang diperbarui sebagai gantinya untuk solusi yang lebih responsif: http://cdpn.io/mKfCcPembaruan (30/11/2015):
(Diperbarui 30/11/2015 http://cdpn.io/mKfCc dengan suntingan di atas)
sumber
Solusi saya
sumber
Itu bisa dengan mudah diperbaiki
display: flex
Dengan awalan
sumber
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:
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.
sumber
Jika Anda baik-baik saja dengan menggunakan flexbox maka ini akan membantu menyelesaikannya.
sumber
pointer-events: none
untuk.modal-dialog
danpointer-events: auto
untuk.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.Solusi saya:
sumber
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
sumber
Menambahkan css sederhana ini juga berfungsi.
sumber
Ada cara termudah untuk melakukan ini menggunakan css:
Itu dia. Perhatikan bahwa itu hanya perlu diterapkan ke
.modal-dialog
div wadah.Demo: https://jsfiddle.net/darioferrer/0ueu4dmy/
sumber
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.
sumber
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/
sumber
Temukan solusi sempurna dari sini
sumber
sumber
@$modal = $('.fade.in'); modalBox = @$modal.find('.modal-content'); initModalHeight = modalBox.outerHeight(); userScreenHeight = @$modal.outerHeight()
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:
sumber
transform
solusi lain , masalah muncul ketika modal memiliki konten yang dapat digulir (lebih banyak konten daripada yang cocok di jendela)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
Css
sumber
Ini bekerja untuk saya:
sumber
Coba sesuatu seperti ini:
sumber
Anda mungkin ingin memeriksa kumpulan metode ini untuk pemusatan absolut div: http://codepen.io/shshaw/full/gEiDt
sumber
Cara yang sederhana. Bekerja untukku. Thks rensdenobel :) http://jsfiddle.net/rensdenobel/sRmLV/13/
sumber
solusi lain yang akan menetapkan posisi yang valid untuk setiap modal yang terlihat pada
window.resize
acara dan padashow.bs.modal
:sumber
sumber
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-dialog
untuk dibungkus di dalammodal-dialog-wrap
kelas dan perlu memiliki penambahan kode berikut: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/
sumber
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/23638Jadi menggunakan v4 Anda hanya perlu menambahkan
.modal-dialog-centered
ke.modal-dialog
pusat modal secara vertikal:sumber
Pertimbangkan untuk menggunakan plugin bootstrap-modal yang ditemukan di sini - https://github.com/jschr/bootstrap-modal
Plugin akan memusatkan semua modals Anda
sumber
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.
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.
sumber
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
modal
menampilkan kelas sebagai tabel dengan mengikuti css:dan
modal-dialog
sebagaidisplay:table-cell
lihat contoh kerja penuh dalam biola yang diberikan
sumber
itu tidak rumit.
silakan coba ini:
sumber
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.
Juga tambahkan perbaikan CSS ini untuk spasi horizontal modal; kami menunjukkan gulir pada modals, gulungan tubuh disembunyikan secara otomatis oleh Bootstrap:
sumber
Dalam bentuk tanaman seluler mungkin terlihat sedikit berbeda, inilah kode saya.
sumber