Solution 1 :

Your selector is different, one has a capital M.

<div id="mymodal" class="modal">

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..

* Template Name: Home Page

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

$args = array(
'post_type' => 'artists',

$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) :
   while ( $the_query->have_posts() ) :
       <?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>

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(){ = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;

var span = document.getElementsByClassName("close")[0];
span.onclick = function() { = "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!


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.


Leave a Reply

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