Button does not open JS modal

Question

When you click on one of the buttons on the page a modal with a form should open. But each button must contain a different form. I used the following code:

<script type="text/JavaScript">
// teste para ocultar menu
var ocultar = document.getElementById('header');

//Obter o modal
var modal = document.getElementById('myModal');

//Obter o botão que abre o modal
var btn = document.getElementById('myBtn');

//Obter o elemento <span> que fecha o modal
var span = document.getElementsByClassName("close")[0];

//Quando o usuário clicar no botão, abra o modal
btn.onclick = function() {
    modal.style.display = 'block';
    ocultar.style.display = ("none");
}

//Quando o usuário clicar em <span> (x), feche o modal
span.onclick = function() {
    modal.style.display = 'none';
    if(ocultar.style = "none"){
        ocultar.style = ("block !important");
    }
}

//Quando o usuário clica em qualquer lugar fora do modal, feche-o
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
        ocultar.style = ("block !important");
    }
}

But the modal is working only on the first button. On the other buttons it doesn’t happen anything. I already checked the console of Google Chrome, and it shows nothing of error.

If you want to take a look >>> WEBSITE WITH THE BUTTONS

Answer 1

If you have several buttons and each opens a different modal, you need to keep in mind that each button should have one id different. Therefore, opening up the respective modal based on the id button becomes something very bad, because you would have to create a onclick for each button.

You can’t have multiple buttons or modals with the same id. This is wrong. A id should be unique throughout the page for any type of element.

What you must do:

Take the click by the class of the button and open the modal that is somehow linked to that button with that class.

Linking each button to your modal:

Include an attribute data-modal="myModal1" on the button tag and change the id also. For example:

<a id="myBtn1" data-modal="myModal1" class="button">Fale comigo</a>

And in the modal related to that button, change the id for:

<div id="myModal1">
    MODAL
</div>

With this suggestion, you are creating a link from the button to the div modal. Do this with all buttons and their respective modals by changing the id and the data-modal to a different value. Example:

<a id="myBtn2" data-modal="myModal2" class="button">Contato</a>

<div id="myModal2">
    MODAL
</div>

....

<a id="myBtn3" data-modal="myModal3" class="button">Contato</a>

<div id="myModal3">
    MODAL
</div>

And so successively with all buttons and modals. So we will have each button and each modal with a id and a data-modal unique.

Once done, just call the modal by clicking on its respective button with the code below:

var botoes = document.querySelectorAll("a.button");
for(var x=0; x<botoes.length; x++){
   botoes[x].addEventListener("click", function(){
      document.getElementById(this.dataset.modal).style.display = "block";
   });
}

And to close, the code:

var fechar = document.querySelectorAll("span.close");
for(var x=0; x<fechar.length; x++){
   fechar[x].addEventListener("click", function(){
      this.parentNode.parentNode.parentNode.style.display = "none";
   });
}

Any doubt just call. Abs!