As pessoas que usaram o componente modal de bootstrap estão confusas. Por que uma boa caixa pop-up não pode ser centrada verticalmente? Por acaso eu estava trabalhando em um projeto EIT. Como algumas estruturas deste projeto seguem algumas regras do NTTDATA, usei o Bootstrap. Encontrei essa coisa pela primeira vez e senti que estava muito em conflito e achei que não era bom, mas quando o usei, senti que não era diferente de outras caixas pop-up. Menos absurdos, chegue ao ponto, o problema da centralização vertical da caixa pop-up de bootstrap é porque o estilo da caixa pop-up que recebi não é verticalmente central, mas o top 10%, mas a página é muito nojenta.
A solução é a seguinte:
1. Em CSS, encontre
.modal.fade.in {top: 10%;}Se você modificar esse estilo, estará ok. Como o CSS é global, você também pode definir a posição (altura) de um determinado modal na página. O método é o seguinte:
<Style>#mymodal-help {top: 300px;} </style>#mymodal-help é o ID modal, então a configuração está ok.
2. Em JS,
Estou usando o bootstrap-modal.js (se estou usando o bootstrap.js ou bootstrap.min.js, também está ok, mas preciso encontrar o local correspondente).
Encontrado em JS (vermelho é o método que eu adicionei):
var esquerdo = ($ (document.body) .width () - that. $ element.width ()) / 2; var top = ($ (document.body) .Height () - that. $ element.Height ()) / 2; var scrolly = document.documentElement.Scrolltop || document.body.scrolltop; // SolrolBar Solution var top = (window.screen.Height /4) + Scrolly - 120; // ScrollBar Solution Console.log (esquerda); que. that.enforcefocus ()
Uma vez encontrado, adicione o vermelho e ficará bem, para que todas as caixas pop-up sejam centralizadas verticalmente.
O exposto acima é a explicação detalhada do problema e da solução da centralização vertical da caixa pop-up de bootstrap (modal) apresentada a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!