Open Pop up with several buttons

0

I can not get several buttons to open a single popup. This is how I did it:

<div class="popup">
  <div id="myModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <div class="row">
        <div class="col-sm-6">
          <p>Evita sanciones por el incumplimiento de la ley.
             Tu tranquilidad empieza con una tributación sana.</p>
          <img src="assets/images/flechablanca.png" alt="Diagnostico">
        </div>
        <div class="col-sm-6">
          <h2>Solicita hoy tu diagnóstico <strong>gratis</strong></h2>
          <form action="/action_page.php">
            <div class="form-group">
              <input type="email" class="form-control" id="emailsqyhh">
            </div>
            <div class="form-group">
              <input type="password" class="form-control" id="pwdsjkn">
            </div>
            <div class="form-group">
              <input type="aa" class="form-control" id="pwdfff">
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>



<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

This button works fine:

<button type="button" id="myBtn" class="btn btn-default"> 
<strong>SOLICITAR</strong></button>

but not the following buttons:

<button type="button" id="myBtn" class="btn btn-default">Conoce ayudamos</button>

<button type="button" id="myBtn" class="btn btn-default">SOLICITAR AHORA</button>

Thank you.

    
asked by Daniel Salinas 05.10.2018 в 23:33
source

1 answer

2

You have a serious error with the IDs of the buttons.

An ID in an HTML element must be unique, within the HTML document.

On your buttons I see that you have repeated the same ID: myBtn . Your javascript will only recognize the first item with that ID.

What you can do is assign different IDs to each button, for example: myBtn1 , myBtn2 and myBtn3 .

And associate the event onclick to each of them as you have it in your code, only in this case it may be preferable not to open the popup in an anonymous function, but in a "normal" "that you invoke when pressing each button.

Greetings.

    
answered by 05.10.2018 / 23:49
source