How to run Javascript popup modal in a loop?

Question

So I have this popup modal:

HTML:

<h2>Modal Example</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

Script:

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

I'm trying to put in a for each post loop.

It works on the first post, but it won't popup for others.

I have tried to put the script outside the loop, same thing.. works for the first post, but not for others.

I think the conflict is with names.

Is it possible to get this working in a loop for every post?

Any help would be appreciated.

EDIT: I have tried to add <?php $postid = get_the_ID(); echo $postid; ?> so that I could give a unique id for each occurrence in the loop.

But that didn't work (even for the first post).

I guess php didn't execute in some script parts.

I really need help with this, how do I solve this?

Answer 1

Sorted using non java script pop up:

Added <?php $postid = get_the_ID(); echo $postid; ?> to html so that it would act as a unique id for each loop post.

HTML:

<a href="#openModal<?php $postid = get_the_ID(); echo $postid; ?>">Open Modal</a>

<div id="openModal<?php $postid = get_the_ID(); echo $postid; ?>" class="modalDialog">
  <div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Popup</h2>
    <p>Isto é uma popup toda bonitinha a funcionar apenas com CSS3.</p>
  </div>
</div>

CSS:

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
.modalDialog:target {
  opacity: 1;
  pointer-events: auto;
}
.modalDialog > div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#fff, #999);
  background: -webkit-linear-gradient(#fff, #999);
  background: -o-linear-gradient(#fff, #999);
}
.close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}
.close:hover {
  background: #00d9ff;
}