Bootstrap modal box (modal) vertical center of the instance code _javascript tips

Bootstrap website Download: http://v3.bootcss.com/

Today, share a problem with the bootstrap framework, using a large number of pop-up windows (modal) during product development.

Just start learning to use the process of discovering that this window can not be vertically centered, always biased, and can not be dragged, looked at the use of the instructions also did not provide too much property settings and methods, so use the default method has been used. Recently, the customer has put forward a request: Can let the pop-up window center, because some small window on the general feel overall page imbalance, the bigger is passable.

Because before the bootstrap is also not very familiar with, then began Baidu, Google, found only a few solutions, as follows:

$ ("#myModal"). Modal (). css ({
"margin-top": function () {return
-($ (this). Height ()/2);
}
});

Reference Address: http://www.g2w.me/2012/06/bootstrap-modal-shown-in-the-center/

This method has tried it himself, and can not be completely centered, and the size of the window is not the same, each display of the Margin-top value will also change, covering the layer will also appear scrollbars, the effect is not good-looking.

I have tried to change a few ways also not optimistic, found that the $ (this) is not available before the window pops up. The value of height (), which is thought to be used ($ (window). Height ()-$ (this). Height ())/2, found to be still not OK.

Finally can only study the source code, found that can be in the Bootstrap.js file 900 lines after adding the following codes, you can achieve vertical center.

$element. Children (). EQ (0). css ("position", "absolute"). CSS ({
"margin": "0px", "Top
": function () {
Return (which $element. Height ()-that. $element. Children (). EQ (0). Height () -40)/2 + "px";
},
"left": function () {that
. $element. Width ()-that. $element. Children (), EQ (0). Width ())/2 + "px";
}
});

The page code is as follows:

 <div> <button class=" btn btn-primary btn-lg "data-toggle=" Modal "data-target=" # Mymodal "> Launch demo modal </button> <!--modal--> <div class=" Modal Fade "id=" Mymodal "tabindex="-1 " role= "Dialog" aria-labelledby= "Mymodallabel" aria-hidden= "true" > <div class= "Modal-dialog" > <div class= " Modal-content "> <div class=" Modal-header "> <button type=" button "class=" Close "data-dismiss=" modal " Aria-hidden= "true" >x</button> 
 

The effect chart is as follows:

The above is a small set to introduce the Bootstrap modal box (modal) vertically centered instance code, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!