Vertical centering of bootstrap modal popup

I am a front-end rookie, and my company is trying to use bootstrap for projects. I take the lead in going through the "pit" for my colleagues, but the UI girl makes it difficult for me to make the modal pop-up box vertically centered. For the honor of the front-end development position, I spend time to satisfy it.

The first one is Baidu. 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";
     }
   });

The that.element here is the outermost div.modal, and that.element.children().eq(0) is the div. Modal-dialog is nothing more than calculating the left value and height value of modal-dialog to center it. Here comes the problem. You add this code to the source code of bootstrap.js (about 1000 lines), and you can console it. that.element.children().eq(0).width() has always been 0, which means it has not been created yet and the value cannot be obtained. In my humble opinion, I added a setTimeout delay of 150ms, but I got it properly. Centering, two more problems pop up. One is that when the user actively drags the window size, it will not adapt accordingly. The solution is also very simple to write a resize method; the second problem is that when the window is smaller than 600. The value of element.children().eq(0).width() is sometimes correct and sometimes incorrect (please ask a master to help me with the answer), so I discard it. If you want to solve the problem directly, just ignore it.

Center it vertically and consider the display: table-cell, also inspired by the Internet, the solution is as follows.

Rewrite the style and introduce the style tag or external link into the 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 the modal trigger event $('.modal').modal() to the following

$('.modal').modal(). css({'display':'table','width':'100%','height':'100%'})

It is very simple to change and very violent. The consequence is that you can click anywhere to make the modal disappear. The event failed. The information I searched for said so, but I didn’t understand it.

Although you can close it by clicking the fork and close button, you can’t let your colleagues in the background look down on you. I thought about it. I want to insert two lines of Jiangzi code into js

$(触发器).click(function(){         
  $('.modal').modal().css({'display':'table','width':'100%','height':'100%'})//这句触发modal
  $('.modal-backdrop').fadeIn()
  event.stopPropagation();//因为触发的元素肯定在document里边，所以必须阻止冒泡
})
$(document).click(function(){
  $('.modal').hide()
  $('.modal-backdrop').fadeOut()
})

At this point, the vertical centering of modal can be achieved, but there are still problems. The fadein time and fadeout time of modal-backdrop flicker too exaggeratedly compared to the original It's still a little weird, please give me some advice.

The above is the entire content of this article. I hope it will be helpful to everyone’s learning. I also hope that everyone will support the PHP Chinese website.

For more articles related to the vertical centering of bootstrap modal pop-up boxes, please pay attention to the PHP Chinese website!