4

Meu ModalBox(.modal-fade no Boostrap), está aparecendo no topo da página! Posso centraliza-lo na Horizontal e Vertical usando só CSS3?

Se sim, qual seria a maneira mais correta?

Segue o código do meu Modal.

<div class="container">
          <!-- Modal -->
          <div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
                 aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <!-- Modal Header -->
                        <div class="modal-header">
                            <button type="button" class="close" 
                               data-dismiss="modal">
                                   <span aria-hidden="true">&times;</span>
                                   <span class="sr-only">Close</span>
                            </button>

                            <h4 class="modal-title" id="myModalLabel">Comunicado Importante!</h4>

                        </div>

                        <!-- Modal Body -->
                        <div class="modal-body">
                            <h5>Preciso centralizar esse ModalBox, usando CSS3!</h5>
                        </div>

                        <!-- Modal Footer -->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
2
  • Olá Angelo! Enriqueça a sua pergunta com algum código, assim fica um pouco difícil de ajudar Commented 27/11/2015 às 16:09
  • relacionada
    – jbrunoxd
    Commented 27/11/2015 às 17:53

1 Resposta 1

4

Você pode fazer assim:

.modal {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}
.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Abrir Modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal Centralizada</h4>
      </div>
      <div class="modal-body">
        conteúdo..
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Sair</button>
        <button type="button" class="btn btn-primary">Salvar</button>
      </div>
    </div>
  </div>
</div>

Veja Funcionando em: jsfiddle

4
  • 1
    Gabriel, é isso, cara! Funcionou de primeira aqui. Ainda não entendi bem o código. Vou ter q olhar com um pouco de calma pra entender o que ele fez. Mas é isso!! Funcionou; Muito Obrigado e Grande Abraço. Commented 27/11/2015 às 19:42
  • @AngeloScali mais tarde vou edita-la colocando o que cada parte do css faz para que você entenda respondi ela bem rápido por que estou ocupado no momento, que bom que resolveu o seu problema ;) Commented 27/11/2015 às 19:54
  • agradeço msm, se puder fazer isso.Vai ser mais uma bela ajuda. Abs Commented 1/12/2015 às 18:04
  • Ajudou muito! Valeu pela dica. Commented 19/07/2017 às 13:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .