Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.
Closed 6 years ago.
Improve this questionI am trying to make a page that queries every post of a specific category ("attractions").
I have been able to get the posts successfully, I just need to make the modals work.
I have made a button inside of my loop which has the title of whatever post the loop is on. I want it so whenever people click on that button, it opens a modal that displays all of the fields from ACF I list in the code.
I am having some issues, though. For some reason I can't get the javascript to work. Right now it's all in the page template file, but I have tried enqueuing the script through the functions.php etc.
My guess is that I am trying to do documents.getElementsByClassName instead of documents.getElementById. I want to use id, but since the loop is what is creating the buttons, I dont know how to make the ids unique. I am thinking something along the lines of making the id the counter of the loop or something, and then storing it in a variable I can reference in the script so I can do getElementsById($someVariable)
Thanks for taking a look!
<?php
get_header();
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'category_name' => 'attractions',
'posts_per_page' => 10,
);
$arr_posts = new WP_Query( $args );
if ( $arr_posts->have_posts() ) :
while ( $arr_posts->have_posts() ) :
$arr_posts->the_post();
get_posts($args);
//vars below
?>
<div class=attractions-wrap>
<button class="openAttractions"><?php the_title(); ?></button>
</div>
<div class="attractionsModal">
<div class=modal-content>
<span class="close">×</span>
<h2><?php the_title(); ?></h2>
<div id="attraction-descrption" class="description">
<h3>Description</h2>
<p><?php the_field('description_field'); ?></p>
</div>
<div id="attraction-opening-hours" class="opening-hours">
<h3>Opening Hours</h2>
<p><?php the_field('opening_hours_field'); ?></p>
</div>
<div id="attraction-practical-information" class="practical-information">
<h3>Practical Information</h2>
<p><?php the_field('practical_information_field'); ?></p>
</div>
</div>
</div>
<?php
endwhile;
endif;
?>
<script type="text/javascript">
// Get the modal
var modal = document.getElementsByClassName('attractionsModal');
// Get the button that opens the modal
var btn = document.getElementsByClassName("openAttractions");
// 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>
Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.
Closed 6 years ago.
Improve this questionI am trying to make a page that queries every post of a specific category ("attractions").
I have been able to get the posts successfully, I just need to make the modals work.
I have made a button inside of my loop which has the title of whatever post the loop is on. I want it so whenever people click on that button, it opens a modal that displays all of the fields from ACF I list in the code.
I am having some issues, though. For some reason I can't get the javascript to work. Right now it's all in the page template file, but I have tried enqueuing the script through the functions.php etc.
My guess is that I am trying to do documents.getElementsByClassName instead of documents.getElementById. I want to use id, but since the loop is what is creating the buttons, I dont know how to make the ids unique. I am thinking something along the lines of making the id the counter of the loop or something, and then storing it in a variable I can reference in the script so I can do getElementsById($someVariable)
Thanks for taking a look!
<?php
get_header();
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'category_name' => 'attractions',
'posts_per_page' => 10,
);
$arr_posts = new WP_Query( $args );
if ( $arr_posts->have_posts() ) :
while ( $arr_posts->have_posts() ) :
$arr_posts->the_post();
get_posts($args);
//vars below
?>
<div class=attractions-wrap>
<button class="openAttractions"><?php the_title(); ?></button>
</div>
<div class="attractionsModal">
<div class=modal-content>
<span class="close">×</span>
<h2><?php the_title(); ?></h2>
<div id="attraction-descrption" class="description">
<h3>Description</h2>
<p><?php the_field('description_field'); ?></p>
</div>
<div id="attraction-opening-hours" class="opening-hours">
<h3>Opening Hours</h2>
<p><?php the_field('opening_hours_field'); ?></p>
</div>
<div id="attraction-practical-information" class="practical-information">
<h3>Practical Information</h2>
<p><?php the_field('practical_information_field'); ?></p>
</div>
</div>
</div>
<?php
endwhile;
endif;
?>
<script type="text/javascript">
// Get the modal
var modal = document.getElementsByClassName('attractionsModal');
// Get the button that opens the modal
var btn = document.getElementsByClassName("openAttractions");
// 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>
2 Answers
Reset to default 1You're right you should be using an id.
I would use a counter in conjunction with get_the_ID();
$arr_posts = new WP_Query( $args );
if ( $arr_posts->have_posts() ) :
$index = 0;
while ( $arr_posts->have_posts() ) : $arr_posts->the_post();
echo $index . '_' . get_the_ID();
endwhile;
endif;
This will give you a unique id which you can use for each item in the loop.
WordPress has a the $index variable built in. We could rewrite this as:
$arr_posts = new WP_Query( $args );
if ( $arr_posts->have_posts() ) :
while ( $arr_posts->have_posts() ) : $arr_posts->the_post();
echo $arr_posts->current_post . '_' . get_the_ID();
endwhile;
endif;
Solved the problem! Thanks again admcfajn for the help. I didn't go the exact route as you suggested, but your answers definitely pointed me in the right direction and led me to solve my issue.
Below is the finished code for the page template, including the JS which is in the while loop, for anyone who would stumble upon this post.
EDIT: I had forgotten to also make a variable for the id of the close button. Below I have changed the code to include the Close button as well :)
<?php
get_header();
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'category_name' => 'attractions',
'posts_per_page' => 10,
);
$arr_posts = new WP_Query( $args );
if ( $arr_posts->have_posts() ) :
while ( $arr_posts->have_posts() ) : $arr_posts->the_post();
get_posts($args);
echo $arr_posts->current_post . '_' . get_the_ID();
//vars below
$trigger_ID = 'trigger_' . $arr_posts->current_post . '_' . get_the_ID();
$modal_ID = 'modal_' . $arr_posts->current_post . '_' . get_the_ID();
$close_ID = 'close_' . $arr_posts->current_post . '_' . get_the_ID();
?>
<button class="trigger" id="<?php echo $trigger_ID ?>"><?php the_title(); ?></button>
<div class="modal" id="<?php echo $modal_ID ?>">
<div class="modal-content">
<span class="close-button" id="<?php echo $close_ID ?>">×</span>
<h2><?php the_title(); ?></h2>
<div id="attraction-descrption" class="description">
<h3>Description</h2>
<p><?php the_field('description_field'); ?></p>
</div>
<div id="attraction-opening-hours" class="opening-hours">
<h3>Opening Hours</h2>
<p><?php the_field('opening_hours_field'); ?></p>
</div>
<div id="attraction-practical-information" class="practical-information">
<h3>Practical Information</h2>
<p><?php the_field('practical_information_field'); ?></p>
</div>
</div>
</div>
<!--
JavaScript for button press below
-->
<script>
$(document).ready(function(){
var modal = document.querySelector("#<?php echo $modal_ID; ?>");
var trigger = document.querySelector("#<?php echo $trigger_ID; ?>");
var closeButton = document.querySelector("#<?php echo $close_ID ?>");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
});
</script>
<?php
endwhile;
endif;
?>
Below here is also the stylesheet that makes this all function properly, as the javascript toggles it on or off.
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 24rem;
border-radius: 0.5rem;
}
.close-button {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
}
.close-button:hover {
background-color: darkgray;
}
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
.modal.show-modal{
display: block !important;
}