How can I use a modal window to display the current post in loops featured image?

Question

Ok I found a solution that seems to work by trying various code snippets I found online. Not sure if it is the best way to approach this but, as no one has answered yet, thought it might be useful to post 🙂

I took out the javascript altogether and used cssW3 modal. Code that works is:

<?php
/**
* Template Name: Home Page
*/


get_header(); ?>
<div class="grid-container">

<?php
$args = array(
'post_type' => 'artists',
);
global $post;
$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) :
   while ( $the_query->have_posts() ) :
       $the_query->the_post();
       ?>

      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
         <img onclick="document.getElementById('mymodal-<?php the_ID(); ?>>').style.display='block'" class= "featured-img" id="myImg-<?php the_ID(); ?>" src="wp-content/themes/dollarartclub/images/women.png" alt="Snow" style="width:100%;max-width:300px">
        <!-- modal -->
        <div id="mymodal-<?php the_ID(); ?>>" class="modal">
          <span onclick="document.getElementById('mymodal-<?php the_ID(); ?>>').style.display='none'" 
      class="w3-button w3-display-topright">&times;</span>
            <img class="modal-content" id="img01-<?php the_ID(); ?>" data-id="img01-<?php the_ID();?>" src="<?php the_post_thumbnail_url($post->ID); ?>"/>
        </div>
      </article>


       <?php
   endwhile;
endif;
wp_reset_query(); ?>

</div>

The css styling needs to be tidied up but the functionality seems to work.