button with js not displaying popup properly on while posts loop [closed]

Question

I’m creating a CPT loop to show all posts info (content, featured image, title,…)

The thing is that I added inside the while loop a button on each post grid that should open a popup with some extended info.

It works on the first post grid but on the rest it doesn’t trigger the popups.

Here the code:

    <div id="primary">
        <div class="channels-container"> 
         <?php
        $my_query = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
        $my_query = new WP_Query( array( 'post_type' => 'example', 'posts_per_page' => 8, 'paged' =>$pagedJob) ); 
        
        
        if ( $my_query->have_posts() ) {

            while ( $my_query->have_posts() ) {

                $my_query->the_post(); 
                // Post data goes here ?>
                  
                
                <div class="cha-cont" >
                    
                    <!-- Trigger/Open The Modal -->
                    <button class="popup2" id="myBtn" style="background-image:url('https://example.com/wp-content/uploads/2020/08/info-6.png');"></button>

                    <!-- The Modal -->
                    <div id="myModal" class="modal">

                        <!-- Modal content -->
                        <div class="modal-content">
                            <span class="close">&times;</span>
                            <div class="img-pop">
                                <?php the_post_thumbnail();?>   
                            </div>
                            <div class="modal-content" id="modalContent"> 
                                <?php the_content(); ?>  
                            </div>
                        </div>

                    </div>
                
                    <a href="<?php the_permalink ();?>" class="cha-ref">
                        <div class="img-cont">
                            <?php the_post_thumbnail();?>  
                        </div>
                        <h2 class="cha-title">
                            <?php the_title(); ?>
                        </h2>
                        <div class="ava">
                            <?php echo get_avatar($user->ID); ?>     
                        </div> 
                    </a>
                </div>        
            <?php
            } 
        }
        ?>
        </div> 
    </div><!-- #primary -->

    <script>
                    
        // Get the modal
        var modal = document.getElementById("myModal");

        // Get the button that opens the modal
        var btn = document.getElementById("myBtn");

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        // When the user clicks on the button, open the modal
        btn.onclick = function() {
            modal.style.display = "block";
        }

        // When the user clicks on <span> (x), close the modal
        span.onclick = function() {
            modal.style.display = "none";
        }

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }

        </script>    
<?php
//Fetch the theme footer template 
 get_footer(); 
?>

CSS:

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  z-index:2;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover, .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Modal Content */
.modal-content {
  background-color: #000000e6;
  margin: auto;
  padding: 40px;
  border: 1px solid #888;
  width: 80%;
  text-align: center;
  color: #ffffff;
  z-index: 3;
  margin-top: 200px;
}

Appreciate your time

0
, , , Zaesar 2 months 0 Answers 37 views 0

Leave an answer