Error opening and closing modals

Asked

Viewed 50 times

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;
}

When the page loads and the first modal is open, everything works perfectly, however, by clicking the buttons to open and close the modals, they lose their css margins.

javascript html css
  • 1

    In your code, when opening a modal, you assign it a display: inline-block. He’s like this by default?

  • That was the mistake, thank you :D

  • 1

    Murilo, don’t add "Fixed" to the title, you can (should :P) answer your own question and favorite it, so it will have the same purpose and will be better for new visits to understand how the problem was solved.

1 answer

0


The display was used: inline-block, that actually had as a standard block, so the error occurred, when correcting for your pattern (block), everything is back to normal

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.