Vertical center of the bootstrapmodal pop-up box

This article describes in detail the vertical center of the bootstrapmodal pop-up box, which has some reference value. If you are interested, you can refer to your front-end cainiao and the company project tries to adopt bootstrap, I took the lead as a colleague, but the UI girl had to center the modal pop-up box vertically to meet the requirements of front-end development.

Baidu is the first. The method is to modify the source code.

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";     }   });

That. element is the outermost p. modal, that. element. children (). eq (0) is p. modal-dialog is nothing more than calculating the left value and height value of modal-dialog to center it. The problem is that you add this code to bootstrap. js source code (about 1000 lines), which can be console to that. element. children (). eq (0 ). width () is always 0, that is, it has not been created yet, and the value cannot be obtained. For cainiao details, see. A setTimeout ms delay is added, but the result is obtained. properly centered, there are two other problems. One is that when you actively drag the window size, it will not be adaptive, and the solution is also very easy to write a resize method; the second problem is that when the window is smaller than 600, that. element. children (). eq (0 ). the value of width () is sometimes right, sometimes wrong (please help me solve the problem), so discard it

If you want to solve the problem directly, ignore it.

The vertical center considers display: table-cell and is also inspired by the Internet. The solution is as follows.
Overwrite the style and style labels or add the style labels to html.

.modal-dialog{display:table-cell;vertical-align:middle;}.modal-content{width:600px;margin:0px auto;}@media screen and (max-width: 780px) {.modal-content{width:400px;}}@media screen and (max-width: 550px) {.modal-content{width:220px;}}

Change modal trigger event $ ('. modal'). modal () to the following:

Detail ('.modal').modal().css ({'display': 'table', 'width': '000000', 'height': '000000 '})

The change is simple and violent. The consequence is that the modal disappearance event becomes invalid at any point. The information I searched is the information I searched, but I didn't understand it.

Even if you click the fork or close button, you can close it, but you cannot let the background colleagues look down on it. You want to insert two lines of soy sauce code in js.

$ (Trigger ). click (function () {detail ('.modal'detail .modal(detail .css ({'display': 'table', 'width': '123', 'height': '123 '}) // trigger modal $ ('. modal-backdrop '). fadeIn () event. stopPropagation (); // because the triggered element must be in the document, bubble must be blocked}) $ (document ). click (function () {$ ('. modal '). hide () $ ('. modal-backdrop '). fadeOut ()})

At this point, the vertical center of modal can be implemented, but there are still some problems. The fadein time and fadeout time of modal-backdrop are too exaggerated and somewhat different from the original one,.

The above is all the content of this article. I hope it will help you learn and support PHP.

For more articles about vertical center in the bootstrap modal pop-up box, refer to the PHP Chinese website!