How to run Javascript popup modal in a loop?

Question

How to run Javascript popup modal in a loop?

robert0

2022年5月10日 15:02

So I have this popup modal:

HTML:

h2Modal Example/h2

!-- Trigger/Open The Modal --
button id=myBtnOpen Modal/button

!-- The Modal --
div id=myModal class=modal

  !-- Modal content --
  div class=modal-content
    span class=closetimes;/span
    pSome 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?

Topic jquery html Wordpress javascript

Category Web

robert0 · Accepted Answer · 2021年7月23日 13:36

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

How to run Javascript popup modal in a loop?

About