BOOTSTRAP SITE OFICIAL DOWNLOAD: http://v3.bootcss.com/
Hoje vou compartilhar um problema encontrado no uso da estrutura do bootstrap. Um grande número de janelas pop-up (modais) foi usado durante o desenvolvimento do produto.
Quando comecei a aprender a usá -lo, descobri que essa janela não pode ser centrada verticalmente, sempre para cima e não pode ser arrastada. Depois de analisar as instruções de uso, não forneci muitas configurações e métodos de atributos, por isso usei o método padrão. Recentemente, o cliente fez uma solicitação: a janela pop-up pode ser centrada? Como algumas janelas pequenas estão no lado superior, a página geral está desequilibrada e as maiores ainda são aceitáveis.
Como eu não estava muito familiarizado com o Bootstrap antes, comecei o Baidu e o Google e descobri que havia apenas algumas soluções, como segue:
$ ("#myModal").Endereço de referência: http://www.g2w.me/2012/06/bootstrap-modal-hown-in-the-center/
Eu mesmo tentei esse método, mas não estava completamente centrado. Se o tamanho da janela for diferente, o valor da margem exibido também mudará sempre e haverá barras de rolagem na camada de capa, o que não é bonito.
Também tentei várias maneiras de mudá -los, mas não foi otimista. Descobri que não conseguia obter o valor de $ (isso) .Height () antes da janela aparecer. Eu pensei que estava usando ($ (janela) .Height ()-$ (this) .Height ())/2, mas achei que ainda não era viável.
Por fim, só posso estudar o código -fonte e descobrir que o código a seguir pode ser adicionado após 900 linhas do arquivo bootstrap.js para obter centralização vertical.
que. (que. $ element.width () - that. $ element.Children (). Eq (0) .Width ()) / 2 + "px";}});
O código da página é o seguinte:
<div><button data-toggle="modal" data-target="#myModal">Launch demo modal</button><!-- Modal --><div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div><div><div><button type="button" data-dismiss="modal" aria-hidden = "true"> × </button> <h4 id = "mymodallabel"> título modal </h4> </div> <div> ... </div> <div> <botão TIPO = "Button" Data-Dismiss = "Modal"> Fechar </Button> <Tipo = "Botão"> Salvar alterações </Button> <//Div "<! /.modal-dialog-> </div> <!-/.modal-> </div>
As renderizações são as seguintes:
O exposto acima é o código de exemplo da centralização vertical da caixa modal de bootstrap (modal) introduzida 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!