Les personnes qui ont utilisé le composant modal bootstrap sont confus. Pourquoi une bonne boîte pop-up ne peut-elle pas être centrée verticalement? Il se trouve que je travaillais sur un projet EIT. Étant donné que certains cadres de ce projet suivent certaines règles de NTTDATA, j'ai utilisé Bootstrap. J'ai rencontré cette chose pour la première fois et j'ai senti que c'était très en conflit et je pensais que ce n'était pas bon, mais quand je l'ai utilisé, je sentais que ce n'était pas différent des autres boîtes pop-up. Moins non-sens, arrivez au point, le problème du centrage vertical de la boîte pop-up bootstrap est que le style de la boîte contextuelle que j'ai obtenue n'est pas centré verticalement, mais les 10% supérieurs, mais la page est très dégoûtante.
La solution est la suivante:
1. Dans CSS, trouvez
.modal.fade.in {top: 10%;}Si vous modifiez ce style, ce sera OK. Étant donné que CSS est global, vous pouvez également définir la position (de hauteur) d'un certain modal dans la page. La méthode est la suivante:
<style> # mymodal-help {top: 300px;} </pyle># MyModal-Help est l'ID modal, donc le paramètre est OK.
2. Dans JS,
J'utilise bootstrap-modal.js (si j'utilise bootstrap.js ou bootstrap.min.js, c'est aussi OK, mais j'ai besoin de trouver l'emplacement correspondant).
Trouvé dans JS (rouge est la méthode que j'ai ajoutée):
var Left = ($ (document.body) .width () - that. $ element.width ()) / 2; var top = ($ (document.body) .height () - that. $ element.height ()) / 2; var scrolly = document.DocumentElement.ScrollTop || document.body.scrolltop; // solution de barre de scroll var top = (window.screen.height / 4) + Scrolly - 120; // Scrollbar Solution Console.log (à gauche); que. $ élément .addclass ('in') .attr ('aria-hidden', false) .css ({Left: Left, top: top, marge: "0 auto"}); that.enforcefocus ()Une fois trouvé, ajoutez le rouge et ce sera OK, afin que toutes les boîtes pop-up soient centrées verticalement.
Ce qui précède est l'explication détaillée du problème et de la solution du centrage vertical de la boîte pop-up bootstrap (modale) présentée par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!