0

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?

3
  • can you please share with me your WordPress code and link of website. so I can see it and help you about this issue. Jul 23, 2021 at 3:44
  • You need to give the button and modal a unique ID for each occurrence in the loop. Jul 23, 2021 at 4:24
  • @Jacob Peattie, I thought so too, but how do I do that? The only way I figured is by adding <?php $postid = get_the_ID(); echo $postid; ?> inside, to make all posts look unique. This would add a unique number (post id number) for each occurrence in the loop. Will this work? If yes, where exactly whould I add this in my code?
    – robert0
    Jul 23, 2021 at 7:40

1 Answer 1

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.