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);
}
})
javascript
twitter-bootstrap
bootstrap-modal
pengguna2613813
sumber
sumber
.modal.fade.in
jugatranslateY(-50%)
membuat modal teratas tidak dapat diakses ketika konten modal lebih tinggi dari ketinggian perangkat).Jawaban:
Ini berhasil: http://jsfiddle.net/sRmLV/1140/
Menggunakan helper-div dan beberapa custom css. Tidak perlu javascript atau jQuery.
HTML (berdasarkan kode demo Bootstrap )
CSS
sumber
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.
sumber
$('.modal:visible').each(centerModal);
if(offset < 0) offset = 0;
Saya menempelkan seluruh blok ke dalam case jawaban yang tidak jelas!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.
sumber
.modal-dialog.modal-sm { padding-top:15%; }
Cara terbaik yang saya temukan untuk semua browser HTML5:
sumber
align-items: center;
kebody.modal-open .modal
tampaknya bekerja.// Gaya
sumber
Parameter teratas sedang diganti dalam .modal.fade.in untuk memaksa nilai yang ditetapkan dalam deklarasi khusus Anda, tambahkan
!important
kata 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.sumber
Pada Bootstrap 4 kelas berikut telah ditambahkan untuk mencapai ini untuk Anda tanpa JavaScript.
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.
sumber
Ini bekerja untuk saya dengan sempurna:
URL Demo lengkap : https://codepen.io/dimbslmh/full/mKfCc
sumber
kamu bisa memakai:
untuk memusatkannya secara vertikal dan horizontal.
sumber
Karena sebagian besar jawaban di sini tidak berfungsi, atau hanya berfungsi sebagian:
Anda harus menggunakan pemilih [style] untuk hanya menerapkan style pada modal yang saat ini aktif, bukan semua modals.
.in
akan 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.sumber
Anda dapat mencapai pusat penyelarasan vertikal pada modal Bootstrap 3 seperti itu:
dan tambahkan kelas css ini ke wadah "modal-dialog"
contoh kerja jsFiddle: http://jsfiddle.net/U4NRx/
sumber
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:
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
sumber
Keuntungan:
display:table-cell
(itu tidak dimaksudkan untuk tata letak)markup
SCSS
untuk mereka yang menggunakangulp
ataugrunt
Tampilkan cuplikan kode
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 dengangulp
/grunt
):sumber
Solusi CSS lainnya. Tidak berfungsi untuk munculan yang lebih besar dari port tampilan.
Di
.modal-dialog
kelas menimpa posisi ke absolut (dari relatif) dan memusatkan kontenright:0, left: 0
Dalam
.modal.fade .modal-dialog , .modal.in .modal-dialog
mengatur animasi transisi lebihtop
dari pada pada menerjemahkan.margin-top
memindahkan 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.
sumber
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.
sumber
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.
sumber
Pilihan saya, hanya sedikit CSS: (TIDAK bekerja di IE8)
Anda dapat bermain dengan aturan pertama untuk mengubah bagaimana modal muncul.
Menggunakan: Bootstrap 3.3.4
sumber
Cukup tambahkan CSS berikut untuk Anda yang sudah ada, Ini berfungsi dengan baik untuk saya
sumber
Berdasarkan jawaban Arany , tetapi juga memperhitungkan gulir halaman.
sumber
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
Dan membuat wadah .modal-dialog.centered ini tetap dan diposisikan dengan benar.
CSS
Atau bahkan lebih sederhana menggunakan flexbox.
CSS
sumber
sumber
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
transition
properti CSS untuk.modal-dialog
sumber
sumber
Ini mengambil jawaban Arany dan membuatnya berfungsi jika modal lebih tinggi dari ketinggian layar:
sumber
Untuk menambahkan pemusatan modal vertikal ke bootstrap modal.js saya menambahkan ini di akhir
Modal.prototype.show
fungsi:sumber
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
* /
Dari Milan Pandya
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
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-content
ketinggian 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
div
harus dihilangkan agar ini berfungsi dengan baik (tampaknya tidak merusak apa pun). Diuji di Chrome 51 dan IE 11.Kode CSS:
EDIT: The
.modal-dialog
class 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.sumber
Solusi terbaik untuk memusatkan modal Anda dengan lebar dan tinggi adalah, dalam css tambahkan dan dalam modal tambahkan ini 'memusatkan' sebagai kelas ..
sumber
Berpusat vertikal Tambahkan .modal-dialog-centered ke .modal-dialog untuk memusatkan modal secara vertikal
Luncurkan modal demo
sumber