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">×</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?
<?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?