How do I link to a dynamic ACF button from a Custom Post type?

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(); ?
    /div
?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
                        /div
                    ?php endwhile ?
                ?php endif; ?
            /div
        /div

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(){
    $('.gallery-button').click(function(){
        event.preventDefault();
        console.log('gallery-button pressed');
    });
}

Topic media-modal advanced-custom-fields custom-post-types Wordpress

Category Web


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>

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.