Your selector is different, one has a capital M.
<div id="mymodal" class="modal">
document.getElementById("myModal")
Your selector is different, one has a capital M.
<div id="mymodal" class="modal">
document.getElementById("myModal")
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">×</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!
You are using
@AbhishekKumarTiwari: Please post that as an answer…
@AbhishekKumarTiwari Thank you so much. I can’t believe I missed that!! Works perfectly now. Much appreciated.