People who have used the bootstrap modal component are confused. Why can't a good pop-up box be vertically centered? I happened to be working on an eit project. Since some frameworks in this project follow some rules of nttdata, I used Bootstrap. I encountered this thing for the first time and felt it was very conflicted and I thought it was not good, but when I used it, I felt it was no different from other pop-up boxes. Less nonsense, get to the point, the problem of vertical centering of the Bootstrap pop-up box is because the style of the pop-up box I got is not vertically centering, but top 10%, but the page is very disgusting.
The solution is as follows:
1. In css, find
.modal.fade.in {top: 10%;}If you modify this style, it will be OK. Since CSS is global, you can also define the (height) position of a certain modal in the page. The method is as follows:
<style>#myModal-help{top:300px;}</style>#myModal-help is the modal id, so the setting is OK.
2. In js,
I am using bootstrap-modal.js (if I am using bootstrap.js or bootstrap.min.js, it is also OK, but I need to find the corresponding location).
Found in js (red is the method I added):
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; //Scrollbar solution var top = (window.screen.height / 4) + scrollY - 120; //Scrollbar solution console.log(left); that.$element .addClass('in') .attr('aria-hidden', false) .css({ left: left, top: top, margin: "0 auto" }); that.enforceFocus()Once found, add the red one and it will be OK, so that all pop-up boxes will be centered vertically.
The above is the detailed explanation of the problem and solution of vertical centering of Bootstrap pop-up box (modal) introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!