People who have used the bootstrap modal (modal box) assembly have a puzzle, how can a good pop-up box not be vertically centered? Of course, some of the online predecessors also gave a lot of answers, feel not too full and for the individual projects are difficult for me and so small white too intuitive understanding. So preface try to write a slightly complete solution, as a summary and future review.
The bootstrap version in the project is 3. X, used as a background for the project. The component popup cannot be vertically centered while the project is in progress, and the sample demo code is as follows:
<!DOCTYPE HTML><HTML> <Head> <title>Bootstrap Modal Vertical Center Test</title> <Linkhref= "Bootstrap.css"rel= "stylesheet"> <MetaCharSet= "Utf-8"> </Head> <Body> <Buttontype= "button"ID= "Modalbtn"class= "Btn btn-primary">Click to eject modal</Button> <Divclass= "Modal Fade"ID= "Mymodal"> <Divclass= "Modal-dialog"> <Divclass= "Modal-content"> <Divclass= "Modal-header"> <Buttontype= "button"class= "Close"Data-dismiss= "Modal"Aria-label= "Close"><spanAria-hidden= "true">×</span></Button> <h4class= "Modal-title">Modal Title</h4> </Div> <Divclass= "Modal-body"> <P>Content…</P> </Div> <Divclass= "Modal-footer"> <Buttontype= "button"class= "Btn Btn-default"Data-dismiss= "Modal">Shut down</Button> <Buttontype= "button"class= "Btn btn-primary">Are you sure</Button> </Div> </Div><!--/.modal-content - </Div><!--/.modal-dialog - </Div><!--/.modal - <Scriptsrc= "Jquery-1.10.2.min.js"></Script> <Scriptsrc= "Bootstrap.js"></Script> <Scripttype= "Text/javascript"> $(function(){ //Dom loading complete var$m _btn= $('#modalBtn'); var$modal= $('#myModal'); $m _btn.on ('Click', function() {$modal. Modal ({backdrop:'Static'}); }); }); </Script> </Body></HTML>
The effect of the popup is this:
The modal position looks uncomfortable when the button is clicked, and the solution is summarized in two:
1. Use the modal popup event method;
As you can see from the official documentation, there are a number of event interfaces for the modal component:
where "Shown.bs.modal" can do some processing after the appearance of the window frame, changing the style of the popup is certainly possible:
<Scripttype= "Text/javascript"> $(function(){ //Dom loading complete var$m _btn= $('#modalBtn'); var$modal= $('#myModal'); $m _btn.on ('Click', function() {$modal. Modal ({backdrop:'Static'}); }); //Test Bootstrap Center$modal. On ('Shown.bs.modal', function(){ var $ This = $( This); var$modal _dialog= $ This. Find ('. Modal-dialog'); varM_top=($ (document). Height ()-$modal _dialog.height ())/2;$modal _dialog.css ({'margin': M_top+ 'px Auto'}); }); }); </Script>
The implementation of the popup box is centered, but the pop-up when there are some hesitation after dithering to the middle; not particularly ideal, next try a second way;
2. Modify Bootstrap.js source code;
Read JS library with the problem source code, often can learn a lot of knowledge, in the spirit of how to let the modal component Auto-center, start tracking the corresponding event when the component pop-up window;
Open Bootstrap.js ctrl+f find the modal corresponding code:
When the popup box appears, the call is naturally the Modal.prototype.show () method, and the That.adjustdialog () method is called in the Show Method:
The above code appears, the official to achieve vertical center is simply too easy, and they do not, can only say that the foreign peer site layout view with We still have a difference. Add a small amount of code:
Modal.prototype.adjustDialog =function () { varModalisoverflowing = This. $element [0].scrollheight >Document.documentElement.clientHeight This. $element. css ({paddingleft:! This. bodyisoverflowing && modalisoverflowing? This. Scrollbarwidth: ", Paddingright: This. bodyisoverflowing &&!modalisoverflowing? This. Scrollbarwidth: " }) //is the pop-up box centered ... var$modal _dialog = $ ( This. $element [0]). Find ('. Modal-dialog ')); varM_top = ($ (document). Height ()-$modal _dialog.height ())/2; $modal _dialog.css ({' margin ': M_top + ' px auto '}); }
Then the modal is vertically centered:
Bootstrap modal Vertical center
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
