0

Javascript

var inicio = document.getElementById('inicio-modal');
var banner = document.getElementById('banner-modal');
var produto = document.getElementById('produtos-modal');

function abreInicio(){
    if (inicio.style.display == 'none') {
        inicio.style.display = 'block';
        banner.style.display = 'none';
        produto.style.display = 'none';
    }
}
function abreBanners(){
    if (banner.style.display == 'none') {
        banner.style.display = 'block';
        inicio.style.display = 'none';
        produto.style.display = 'none';
    }
}
function abreProdutos(){
    if (produto.style.display == 'none') {
        produto.style.display = 'block';
        inicio.style.display = 'none';
        banner.style.display = 'none';
    }
}

HTML

<div id="inicio-modal" class="modal"></div>
<div id="banner-modal" class="modal" style='display:none;'></div>
<div id="produtos-modal" class="modal" style='display:none;'></div>

CSS

.modal{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1024px;
}

Quando a página é carregada e o primeiro modal está aberto, tudo funciona perfeitamente, porém, ao clicar nos botões para abrir e fechar os modais, eles perdem suas margens do css.

3
  • 1
    No seu código, ao abrir um modal, você o atribui um display: inline-block. Ele está assim por padrão? Commented 15/08/2016 às 13:17
  • Era esse mesmo o erro, obrigado :D Commented 15/08/2016 às 13:30
  • 1
    Murilo, não adicione "Corrigido" ao título, você pode (deve :P) responder sua própria pergunta e favoritá-la, assim terá o mesmo intuito e será melhor para novas visitas entenderem como o problema foi resolvido. Commented 15/08/2016 às 13:33

1 Resposta 1

0

Foi utilizado o display: inline-block, que na verdade tinha como padrão block, por isso o erro acontecia, ao corrigir para seu padrão (block), tudo voltou a funcionar normalmente

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 .