Bootstrap official website download: http://v3.bootcss.com/
Today I will share a problem encountered in using the Bootstrap framework. A large number of pop-up windows (modals) were used during product development.
When I first started learning to use it, I found that this window cannot be vertically centered, always upward, and cannot be dragged. After looking at the instructions for use, I did not provide too many attribute settings and methods, so I used the default method. Recently, the customer has made a request: Can the pop-up window be centered? Because some small windows are on the upper side, the overall page is unbalanced, and the larger ones are still acceptable.
Because I was not very familiar with Bootstrap before, I started baidu and Google and found that there were 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/
I tried this method myself, but it was not completely centered. If the size of the window is different, the margin-top value displayed will also change every time, and there will be scroll bars on the cover layer, which is not good-looking.
I also tried several ways to change them, but it was not optimistic. I found that I could not get the value of $(this).height() before the window popped up. I thought I was using ($(window).height()-$(this).height())/2, but I found that it was still not feasible.
Finally, I can only study the source code and find that the following code can be added after 900 lines of the bootstrap.js file to achieve vertical centering.
that.$element.children().eq(0).css("position", "absolute").css({"margin":"0px","top": function () {return (that.$element.height() - that.$element.children().eq(0).height()-40) / 2 + "px";},"left": function () {return (that.$element.width() - that.$element.children().eq(0).width()) / 2 + "px";}});The page code is as follows:
<div><button data-toggle="modal" data-target="#myModal">Launch demo modal</button><!-- Modal --><div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div><div><div><button type="button" data-dismiss="modal" aria-hidden="true">×</button><h4 id="myModalLabel">Modal title</h4></div><div>...</div><div><button type="button" data-dismiss="modal">Close</button><button type="button">Save changes</button></div><!-- /.modal-content --></div><!-- /.modal-dialog --></div><!-- /.modal --></div>
The renderings are as follows:
The above is the example code of the vertical centering of the Bootstrap modal box (modal) introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!