Centrage vertical de la fenêtre contextuelle modale bootstrap

Je suis une recrue front-end et mon entreprise essaie d'utiliser bootstrap pour les projets. Je prends l'initiative de parcourir le "puits" pour mes collègues, mais la fille de l'interface utilisateur me rend difficile la création du modal. boîte pop-up centrée verticalement. Pour l'honneur du poste de développement front-end, je prends du temps pour le satisfaire.

Le premier est Baidu. La méthode consiste à modifier le code source

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

Le that.element ici est. la couche la plus externe div.modal, that.element.children().eq(0) est div.modal-dialog, ce qui n'est rien de plus que calculer la valeur gauche et la valeur de hauteur de la boîte de dialogue modale à l'intérieur pour la centrer. c'est-à-dire, mettez-vous ceci Ajoutez ce code au code source de bootstrap.js (environ 1 000 lignes). Vous pouvez consoler que.element.children().eq(0).width() est toujours 0, ce qui signifie qu'il a n'a pas encore été créé et ne peut pas être obtenu. Valeur, à mon humble avis, j'ai ajouté un délai setTimeout de 150 ms, mais je l'ai obtenu et il était correctement centré. Le premier est que lorsque l'utilisateur fait glisser activement la fenêtre. taille, elle ne s'adaptera pas en conséquence. La solution est également Il est très simple d'écrire une méthode de redimensionnement ; le deuxième problème est que lorsque la fenêtre est inférieure à 600, la valeur de that.element.children().eq(0) .width() est parfois correct et parfois incorrect (veuillez demander au maître de m'aider à répondre), alors abandonnez-le

Si vous souhaitez résoudre le problème directement, regardez ce qui précède et ignorez-le

.

Le centrage vertical prend en compte display: table-cell Inspirée d'Internet, la solution est la suivante.
Réécrivez le style et introduisez la balise de style ou le lien externe dans le code 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;}
}

Changez l'événement déclencheur modal $('.modal').modal() en suivant

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

C'est très simple à changer, mais aussi très violent. La conséquence est que l'événement de cliquer n'importe où pour faire disparaître le modal est invalide. L'information que j'ai recherchée le dit, mais je ne la comprends pas.

À ce stade, le centrage vertical du modal peut être réalisé, mais il y a encore des problèmes de temps de fondu d'entrée et de sortie de la toile de fond modale. sont trop exagérés et sont un peu différents de ceux d'origine. S'il vous plaît, faites-le-moi savoir, mon Dieu, prévenez-moi.

$(触发器).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()
})

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. J'espère également que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'articles liés au centrage vertical des boîtes pop-up modales bootstrap, veuillez faire attention au site Web PHP chinois !