Bootstrap pop up box of modal Vertical centering problem and solution details

People who have used the bootstrap modal component have a kind of confusion, how can a good pop-up box not be vertically centered?I happened to be working on an eit project. Because some of the frames in this project follow nttdata's rules, I used Bootstrap, which is very different from other pop-up boxes when I first encountered it.Say nothing, get to the point, Bootstrap pop-up vertical center problem, because I get the pop-up box style is not vertical center, but top 10%, but the page is very long, it is particularly nauseous.

The solution is as follows:

1. In css, find

.modal.fade.in {
top: 10%;
}

This style, if you modify it, is ok, because css is global, you can also define an modal (height) location on the page by:

<style>
#myModal-help
{
top:300px;
}
</style>

#myModal-help This is id of modal, so the setting is ok.

2. In js,

I'm using bootstrap-modal.js (if I'm using bootstrap.js or bootstrap.min.js, that's fine, but I need to find the location).

Found in js (red is the way I added it):

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 color to ok so that 1 centers all the pop-ups vertically.