2

Tentei criar algo do tipo modal, assim:

.try-modal{ 
    position: absolute;
    top:35%;
    left:25%;
    right: 25%;
    width: 50%;
    height: 400px;
    background-color: white;
    z-index: 2;
}

Chamo a <div class="try-modal"> com Jquery, até ai tudo bem. Mas agora eu queria que a parte de trás, depois de aparecer este "modal", o que estivesse em 2º plano ficasse meio escuro como se fosse o modal do bootstrap. Há algum código ou tricks para fazer isso?

1 Resposta 1

5

Considerando que toda a funcionalidade está ok (como você afirmou na questão), basta fazer com que ele adicione um 2º elemento, feito isso, controle a exibição com o z-index.

Exemplo:

.try-modal-overlay {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(#000, .4);
    z-index: 2;
}
.try-modal{
    position: absolute;
    top:35%;
    left:25%;
    right: 25%;
    width: 50%;
    height: 400px;
    background-color: white;
    z-index: 3; 
}

Assim o elemento try-modal-overlay ficará atrás do seu modal e com fundo preto transparente.


Uma alternativa seria usar o elemento :before em seu css, eliminando a necessidade de adicionar outro elemento com jQuery.

.try-modal:before {
    content: '';
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(#000, .4);
    z-index: 2;
}
.try-modal {
    ...[demais estilos]...
    z-index: 3; //Não esqueça de alterar esse index também
}

Eu, particularmente, prefiro a primeira opção pois fica mais segmentado, mas fica a seu critério.

3
  • Então basicamente é só criar uma outra camada 8/06/2016 às 14:38
  • 1
    @programmer2016 isso. Você pode usar outra técnica de CSS, utilizando o before, vou atualizar a resposta. 8/06/2016 às 14:40
  • 1
    Obrigado @CelsomTrindade 8/06/2016 às 14:45

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 .