The Bootstrap pop-up box (modal) describes the vertical center problem and solution, bootstrapmodal

The Bootstrap pop-up box (modal) describes the vertical center problem and solution, bootstrapmodal

People who have used the bootstrap modal (modal box) component have a certain confusion. How can they not vertically center a good pop-up box? Coincidentally, I am working on an eit project. Because some frameworks in this project need to follow some nttdata rules, I used Bootstrap. For the first time I met this topic, it was highly resistant and I felt bad, however, I think it is no different from other pop-up boxes. To put it bluntly, the question is: the vertical center of the Bootstrap pop-up box, because the pop-up box style I got is not vertical center, but top 10%, but the page is too long, so it looks quite disgusting.

The solution is as follows:

1. In css, find

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

Modify the style and it will be OK. Because css is global, you can also define a modal (height) Position on 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 a bootstrap-modal.js (if bootstrap. js or bootstrap. min. js is used, you can do the same, but you need to find the corresponding location ).

Find 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.doc umentElement. scrollTop | document. body. scrollTop; // the solution of the scroll bar var top = (window. screen. height/4) + scrollY-120; // scroll bar SolutionConsole. log (left); that. $ element. addClass ('in '). attr ('aria-den ', false ). css ({left: left, top: top, margin: "0 auto"}); that. enforceFocus ()

After finding the dialog box, add the red one and click OK. In this way, all the pop-up boxes are vertically centered.

The above is the introduction of the Bootstrap pop-up box (modal) vertical center problem and detailed knowledge about the solution, I hope to help you, if you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!