Solution 1 :

Your selector is different, one has a capital M.

<div id="mymodal" class="modal">
document.getElementById("myModal")

Problem :

This is my first time posting here and I’m relatively new to coding so excuse my ignorance.

I am working on a page for my wordpress template that will open a modal window to display an image when a div is clicked.

Here is my HTML so far..

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


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

<?php
$args = array(
'post_type' => 'artists',
);

$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) :
   while ( $the_query->have_posts() ) :
       $the_query->the_post();
       ?>
       <?php $postId = get_the_ID(); ?>
      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
      <div id="popup">
      <img id="myImg" src="wp-content/themes/dollarartclub/images/women.png" alt="Snow" style="width:100%;max-width:300px">
    </div><!-- modal -->
    <div id="mymodal" class="modal">
      <span class="close">&times;</span>
      <img class="modal-content" id="img01">
     <div id="caption"></div>
    </div>
    
  </article>
       <?php
   endwhile;
endif;
wp_reset_query();
    ?>
  </article>
</div>

Javascript (enqueued in my functions.php)

jQuery(document).ready(function($) {
var modal = document.getElementById("myModal");
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
  modal.style.display = "none";
}
});

I keep getting the console error “uncaught TypeError: can’t access property “style”, modal is null” I was getting ‘can’t access onclick, img is null but wrapping the javascript in the jquery function seemed to stop this.

I have been trying to get this to work for a week with no luck and it’s driving me crazy. Any help would be greatly appreciated. Thank you!

Comments

Comment posted by AKT

You are using

Comment posted by H.B.

@AbhishekKumarTiwari: Please post that as an answer…

Comment posted by SamRob

@AbhishekKumarTiwari Thank you so much. I can’t believe I missed that!! Works perfectly now. Much appreciated.

By

Leave a Reply

Your email address will not be published. Required fields are marked *