I have a custom post type archive that has articles that call some ACF content on each post. I've used WP_Query to pull these articles onto the archive page, and there's a button in each article that when clicked will open a modal window with images I've placed in an ACF repeater for the custom post.

How do I call the modal window by that button without calling the other modal windows open?

Here's my code for the archive page:

<?php if ($the_query->have_posts()) { ?>
    <div id="post-list" class="columns property-grid">
        <?php while( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <?php get_template_part( 'partials/content' , 'property' ); ?>
        <?php endwhile; // while has_post(); ?>

        <?php the_posts_pagination(); ?>
<?php } else { ?>
        <?php } wp_reset_postdata(); ?>
<?php } endif { ?>

and here's my code for the data per article loop:

            <h2><?php the_title(); ?></h2>
            <?php echo get_field('property_address');?>
            <a href="#" class="button gallery-button">View Images</a>

Here is my code for the modal gallery popup, if necessary:

<div class="modal-gallery">
            <span class="close cursor" onclick="closeModal()">&times;</span>
            <div class="modal-content">
                <?php if(have_rows('property_gallery')) : ?>
                    <?php while(have_rows('property_gallery')) : the_row() ?>
                        <img class="prop-image" src="<?php echo get_sub_field('image'); ?>" alt=""><br>

                        <!-- Next/previous controls -->
                        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                        <a class="next" onclick="plusSlides(1)">&#10095;</a>

                        <!-- Caption text -->
                        <div class="caption">
                            <p><?php echo get_sub_field('image_text'); ?></p>
                    <?php endwhile ?>
                <?php endif; ?>

in my JS file I have a function called openModal, but I don't know how to call the Modal window of a specific article. If I call by class it won't work since each button will share that class, and I can't specify an ID without an ID already being set per article. The incomplete code is below:

function openModal(){
        console.log('gallery-button pressed');

I decided to rewrite my code and no longer use JS to open the Modal window, but pure CSS. I then attached the POST ID to the ID tag so that each modal window would be unique.

code for a tag below. Href matches the ID on modal div.

<a href="#open-modal-<?php echo $post->ID; ?>" class="button gallery-button">View Images</a>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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