Explication détaillée du problème et solution du centrage vertical de la boîte contextuelle Bootstrap (modale)

Les personnes qui ont utilisé le composant modal bootstrap (boîte modale) sont confuses. Pourquoi une bonne boîte contextuelle ne peut-elle pas être centrée verticalement ? Il se trouve que je travaillais sur un projet eit. Étant donné que certains frameworks de ce projet doivent suivre certaines règles de nttdata, j'ai utilisé Bootstrap pour la première fois, j'étais très en conflit et j'ai senti que ce n'était pas bon. après l'avoir utilisé, cela ne semble pas être différent des autres boîtes pop-up. Sans plus tarder, entrons dans le vif du sujet, le problème du centrage vertical de la pop-up Bootstrap, car le style de pop-up box que j'ai obtenu n'est pas centré verticalement, mais top 10%, mais lorsque la page est longue, elle a l'air particulièrement dégoûtant.

La solution est la suivante :

1. En css, recherchez

.modal.fade.in {
top: 10%;
}

Ce style peut être modifié Comme il est global en CSS, il peut également être défini à la position (hauteur) d'un certain modal dans la page. La méthode est la suivante :

<style>
#myModal-help
{
top:300px;
}
</style>

#myModal-help C'est l'identifiant du modal, donc le réglage est ok.

2. En js,

J'utilise bootstrap-modal.js (si vous utilisez bootstrap.js ou bootstrap.min.js, pareil Oui, mais vous il faut trouver l'emplacement correspondant).

se trouve dans js (le rouge est la méthode que j'ai ajoutée) :

var left = ($(document.body).width() - that.$element.width()) / 2;
<strong><span style="color: #ff0000">var top = ($(document.body).height() - that.$element.height()) / 2;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop; //滚动条解决办法
var top = (window.screen.height / 4) + scrollY - 120; //滚动条解决办法
</span></strong>console.log(left);
that.$element
.addClass(&#39;in&#39;)
.attr(&#39;aria-hidden&#39;, false)
.css({
left: left,
top: top,
margin: "0 auto"
});
that.enforceFocus()

Après l'avoir trouvé, ajoutez le rouge Entrez-le et tout ira bien, de sorte que toutes les boîtes contextuelles soient centrées verticalement.

Ce qui précède est les connaissances pertinentes présentées par l'éditeur sur le problème et la solution du centrage vertical de la boîte contextuelle Bootstrap (modal). J'espère que cela vous sera utile. Si vous avez des questions, laissez-moi un message et je vous répondrai à temps. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !

Pour des explications plus détaillées sur les problèmes et les solutions liés au centrage vertical des boîtes pop-up Bootstrap (modales), veuillez faire attention au site PHP chinois !