Button does not open modal JS

Question

Button does not open modal JS

Navigation

#1 by (0 votes)

1

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 only working on the first button. On the other buttons, nothing happens. I already checked the Google Chrome console, and it does not show any error.

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

javascript

asked by anonymous 15.01.2018 / 20:36

1 answer

create button to cancel fullscreen function Catch hidden extension of Uri

score 0 · Accepted Answer

If you have multiple buttons and each opens a different modal, you must keep in mind that each button must have a id different. So opening its modal based on the id of the button becomes very bad because you would have to create a onclick for each button.

You can not have multiple buttons or mods with the same id . This is wrong. A id must be unique across the page for any element type.

What you should do:

Take the click of the button class and open the modal that is somehow bound to that button with this class.

Linking each button to your modal:

Include a data-modal="myModal1" attribute in the button tag and change id as well. For example:

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

And in the modal related to this button, change the id to:

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

With this suggestion, you are creating a button bind with the div of the modal. Do this with all the buttons and their respective modals by changing id and 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 on with all the buttons and manners. So we will have each button and each modal with a id and a data-modal unique.

Once this is 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 questions just call. Abs!