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.
display: inline-block
. Ele está assim por padrão?