Esta é uma questão de duas partes:
Como você pode posicionar o modal verticalmente no centro quando não sabe a altura exata do modal?
É possível ter o modal centralizado e ter excesso: auto no corpo modal, mas apenas se o modal exceder a altura da tela?
Eu tentei usar isso:
.modal-dialog {
height: 80% !important;
padding-top:10%;
}
.modal-content {
height: 100% !important;
overflow:visible;
}
.modal-body {
height: 80%;
overflow: auto;
}
Isso me dá o resultado necessário quando o conteúdo é muito maior que o tamanho da tela vertical, mas para conteúdos modais pequenos é praticamente inutilizável.
css
twitter-bootstrap
modal-dialog
center
patinete
fonte
fonte
Respostas:
E ajuste um pouco a classe .fade para garantir que apareça fora da borda superior da janela, em vez do centro
fonte
1. Como você pode posicionar o modal verticalmente no centro quando não sabe a altura exata do modal?
Para centralizar absolutamente o Modal do Bootstrap 3 sem declarar uma altura, você primeiro precisará sobrescrever o CSS do Bootstrap adicionando isso à sua folha de estilos:Isso posicionará o canto superior esquerdo das caixas de diálogo modais no centro da janela.
Temos que adicionar essa consulta de mídia ou a margem esquerda modal está incorreta em pequenos dispositivos:
Agora precisaremos ajustar sua posição com JavaScript. Para isso, atribuímos ao elemento uma margem superior e esquerda negativa igual à metade de sua altura e largura. Neste exemplo, usaremos o jQuery, pois ele está disponível no Bootstrap.
Atualização (01/10/2015):
Adicionando a resposta de Finik . Créditos à Centralização no Desconhecido .
Observe a margem negativa, certo? Isso remove o espaço adicionado pelo bloco embutido. Esse espaço faz com que o modal pule para a parte inferior da página @media width <768px.
2. É possível ter o modal centrado e ter excesso: auto no corpo modal, mas apenas se o modal exceder a altura da tela?
Isso é possível fornecendo ao corpo modal um estouro-y: auto e uma altura máxima. Isso leva um pouco mais de trabalho para fazê-lo funcionar corretamente. Comece adicionando isso à sua folha de estilos:Usaremos o jQuery novamente para obter a altura da janela e definir a altura máxima do conteúdo modal primeiro. Então temos que definir a altura máxima do corpo modal, subtraindo o conteúdo modal com o cabeçalho modal e o rodapé modal:
Você pode encontrar uma demonstração de trabalho aqui com o Bootstrap 3.0.3: http://cdpn.io/GwvrJEDIT: eu recomendo usar a versão atualizada em vez de uma solução mais responsiva: http://cdpn.io/mKfCcAtualização (30/11/2015):
(Atualizado em 30/11/2015 http://cdpn.io/mKfCc com a edição acima)
fonte
Minha solução
fonte
Pode simplesmente ser reparado com
display: flex
Com prefixo
fonte
Eu vim com uma solução css pura! No entanto, é css3, o que significa que o ie8 ou inferior não é suportado, mas, além disso, foi testado e funciona no ios, android, ie9 +, chrome, firefox, safari para desktop ..
Estou usando o seguinte css:
Aqui está um violino. http://codepen.io/anon/pen/Hiskj
..selecionando isso como a resposta correta, já que não há javascript extra pesado que ajoelha o navegador no caso de mais de um modal.
fonte
Se você concorda com o uso do flexbox, isso deve ajudar a resolvê-lo.
fonte
pointer-events: none
a.modal-dialog
epointer-events: auto
para.modal-content
. O Becausu.modal-dialog {height: 100%}
cobre toda a coluna acima e abaixo de um modal e desativa os usuários a clicar no pano de fundo nessa área.Minha solução:
fonte
Tudo o que fiz no meu caso é definir o Top no meu CSS sabendo a altura do modal
<div id="myModal" class="modal fade"> ... </div>
no meu css eu defino
fonte
Adicionar este css simples também funciona.
fonte
Existe uma maneira mais fácil de fazer isso usando o css:
É isso aí. Observe que ele só precisa ser aplicado ao
.modal-dialog
div contêiner.Demonstração: https://jsfiddle.net/darioferrer/0ueu4dmy/
fonte
Expandindo a excelente resposta de @ Finik, essa correção é aplicada apenas a dispositivos não móveis. Eu testei no IE8, Chrome e Firefox 22 - ele funciona com conteúdo muito longo ou curto.
fonte
A solução mais universal que escrevi. Dinamicamente calcula com a altura do diálogo. (O próximo passo pode ser o recálculo da altura das caixas de diálogo no redimensionamento da janela.)
JSfiddle: http://jsfiddle.net/8Fvg9/3/
fonte
Encontre a solução perfeita a partir daqui
fonte
fonte
@$modal = $('.fade.in'); modalBox = @$modal.find('.modal-content'); initModalHeight = modalBox.outerHeight(); userScreenHeight = @$modal.outerHeight()
Aqui está outro método único de css que funciona muito bem e é baseado nisso: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
sass:
fonte
transform
soluções as arestas de emissão quando o modal tem conteúdo de rolagem (mais conteúdo do que se encaixa na janela)Eu baixei o bootstrap3-dialog a partir do link abaixo e modifiquei a função aberta no bootstrap-dialog.js
https://github.com/nakupanda/bootstrap3-dialog
Código
Css
fonte
Isso funciona para mim:
fonte
Tente algo como isto:
fonte
Você pode conferir esta coleção de métodos para centralizar absoluta uma div: http://codepen.io/shshaw/full/gEiDt
fonte
Uma maneira simples. Trabalhe para mim. Thks rensdenobel :) http://jsfiddle.net/rensdenobel/sRmLV/13/
fonte
mais uma solução que definirá uma posição válida para cada modal visível no
window.resize
evento e noshow.bs.modal
:fonte
fonte
Eu sei que é um pouco tarde, mas estou adicionando uma nova resposta para que ela não se perca na multidão. É uma solução de navegador móvel para desktops que funciona em todos os lugares corretamente, como deveria.
Ele só precisa
modal-dialog
ser agrupado dentro de umamodal-dialog-wrap
classe e precisa ter as seguintes adições de código:A caixa de diálogo começa centralizada e, nos casos de conteúdo grande, simplesmente cresce verticalmente até que uma barra de rolagem seja exibida.
Aqui está um violino de trabalho para o seu prazer!
https://jsfiddle.net/v6u82mvu/1/
fonte
Isso é bastante antigo e pede especificamente uma solução usando o Bootstrap 3, mas para quem se pergunta: a partir do Bootstrap 4, há uma solução interna chamada
.modal-dialog-centered
. Aqui está o problema: https://github.com/twbs/bootstrap/issues/23638Então, usando a v4, você só precisa adicionar
.modal-dialog-centered
para.modal-dialog
centralizar verticalmente o modal:fonte
Considere usar o plug-in bootstrap-modal encontrado aqui - https://github.com/jschr/bootstrap-modal
O plugin irá centralizar todos os seus modais
fonte
Para a centralização, não entendo o que há com as soluções excessivamente complicadas. O bootstrap já o centraliza horizontalmente para você, para que você não precise mexer com isso. Minha solução é apenas definir uma margem superior usando apenas o jQuery.
Usei o evento loaded.bs.modal enquanto carregava remotamente o conteúdo e, usando o evento mostrado.ba.modal, o cálculo da altura está incorreto. É claro que você pode adicionar um evento para a janela que está sendo redimensionada se precisar que ela seja responsiva.
fonte
Maneira muito fácil de alcançar esse conceito e você terá modal sempre no modo de tela por css como fllow: http://jsfiddle.net/jy0zc2jc/1/
você precisa apenas
modal
classificar a exibição como tabela seguindo css:e
modal-dialog
comodisplay:table-cell
veja o exemplo completo de trabalho em determinado violino
fonte
não é tão complicado.
por favor tente isto:
fonte
Use este script simples que centraliza os modais.
Se desejar, você pode definir uma classe personalizada (por exemplo: .modal.modal-vcenter em vez de .modal) para limitar a funcionalidade apenas a alguns modais.
Adicione também esta correção CSS para o espaçamento horizontal do modal; mostramos a rolagem nos modais, a rolagem do corpo é ocultada automaticamente pelo Bootstrap:
fonte
No formulário móvel, pode parecer um pouco diferente, aqui está o meu código.
fonte