Orang yang menggunakan komponen modal bootstrap bingung. Mengapa kotak pop-up yang bagus tidak bisa berpusat secara vertikal? Saya kebetulan sedang mengerjakan proyek EIT. Karena beberapa kerangka kerja dalam proyek ini mengikuti beberapa aturan nttdata, saya menggunakan bootstrap. Saya menemukan benda ini untuk pertama kalinya dan merasa itu sangat berkonflik dan saya pikir itu tidak baik, tetapi ketika saya menggunakannya, saya merasa itu tidak berbeda dengan kotak pop-up lainnya. Kurang omong kosong, sampai ke titik, masalah berpusat vertikal kotak pop-up bootstrap adalah karena gaya kotak pop-up yang saya dapatkan tidak berpusat secara vertikal, tetapi 10%teratas, tetapi halaman ini sangat menjijikkan.
Solusinya adalah sebagai berikut:
1. Di CSS, temukan
.modal.fade.in {top: 10%;}Jika Anda memodifikasi gaya ini, itu akan baik -baik saja. Karena CSS bersifat global, Anda juga dapat menentukan posisi (tinggi) modal tertentu di halaman. Metode ini adalah sebagai berikut:
<tyle>#mymodal-help {top: 300px;} </tyle>#MyModal-Help adalah ID modal, jadi pengaturannya OK.
2. Di JS,
Saya menggunakan bootstrap-modal.js (jika saya menggunakan bootstrap.js atau bootstrap.min.js, itu juga ok, tetapi saya perlu menemukan lokasi yang sesuai).
Ditemukan di JS (merah adalah metode yang saya tambahkan):
var left = ($ (document.body) .width () - that. $ element.width ()) / 2; var top = ($ (document.body) .height () - that. $ element.height ()) / 2; var scrolly = document.documentelement.scrolltop || document.body.scrolltop; // solusi scrollbar var top = (window.screen.height /4) + scrolly - 120; // solus scrollbar console.log (kiri); itu. $ element .addclass ('in') .attr ('aria-hidden', false) .css ({kiri: kiri, atas: atas, margin: "0 auto"}); itu.enforceFocus ()Setelah ditemukan, tambahkan yang merah dan akan baik-baik saja, sehingga semua kotak pop-up akan dipusatkan secara vertikal.
Di atas adalah penjelasan terperinci tentang masalah dan solusi pemusatan vertikal kotak pop-up bootstrap (modal) yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!