Detailed explanation of the problem and solution of vertical centering of Bootstrap pop-up box (modal)

People who have used the bootstrap modal (modal box) 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 have to follow some rules of nttdata, I used Bootstrap. When I encountered this stuff for the first time, I was very conflicted and felt it was not good. But after using it, I It seems to be no different from other pop-up boxes. Without further ado, let’s get to the point, the problem of vertical centering of the Bootstrap pop-up box, because the pop-up box style I got is not vertically centered, but top 10%, but when the page is long, it looks particularly disgusting.

The solution is as follows:

1. In the css, find the style

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

and modify it. Since it is global in css, it can also be defined on the page. The (height) position of a certain modal, the method is as follows:

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

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

2. In js,

I use bootstrap-modal.js (if you use bootstrap.js or bootstrap.min.js, it is also possible, but you need to find the corresponding location).

Found in js (red is the method I added):

var left = ($(document.body).width() - that.$element.width()) / 2;
<strong><span style="color: #ff0000">var top = ($(document.body).height() - that.$element.height()) / 2;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop; //滚动条解决办法
var top = (window.screen.height / 4) + scrollY - 120; //滚动条解决办法
</span></strong>console.log(left);
that.$element
.addClass(&#39;in&#39;)
.attr(&#39;aria-hidden&#39;, false)
.css({
left: left,
top: top,
margin: "0 auto"
});
that.enforceFocus()

After finding it, add the red one and it will be ok. In this way, all pop-up boxes will be vertically centered.

The above is the relevant knowledge introduced by the editor to you about the problem and solution of vertical centering of the Bootstrap pop-up box (modal). I hope it will be helpful to you. If you have any questions, please leave me a message. Editor Will reply to everyone promptly. I would also like to thank you all for your support of the PHP Chinese website!

For more detailed explanations on the problems and solutions of vertical centering of the Bootstrap pop-up box (modal), please pay attention to the PHP Chinese website!