Title: ronthewebdev's Replies | WordPress.org

---

# ronthewebdev

  [  ](https://wordpress.org/support/users/ronthewebdev/)

 *   [Profile](https://wordpress.org/support/users/ronthewebdev/)
 *   [Topics Started](https://wordpress.org/support/users/ronthewebdev/topics/)
 *   [Replies Created](https://wordpress.org/support/users/ronthewebdev/replies/)
 *   [Reviews Written](https://wordpress.org/support/users/ronthewebdev/reviews/)
 *   [Topics Replied To](https://wordpress.org/support/users/ronthewebdev/replied-to/)
 *   [Engagements](https://wordpress.org/support/users/ronthewebdev/engagements/)
 *   [Favorites](https://wordpress.org/support/users/ronthewebdev/favorites/)

 Search replies:

## Forum Replies Created

Viewing 10 replies - 1 through 10 (of 10 total)

 *   Forum: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
   
   In reply to: [How to add a custom div with class right after another div on the homepage?](https://wordpress.org/support/topic/how-to-add-a-custom-div-with-class-right-after-another-div-on-the-homepage/)
 *  Thread Starter [ronthewebdev](https://wordpress.org/support/users/ronthewebdev/)
 * (@ronthewebdev)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/how-to-add-a-custom-div-with-class-right-after-another-div-on-the-homepage/#post-15470371)
 * Yes, the hero is added by using GeneratePress elements.
 *   Forum: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
   
   In reply to: [How to add a custom div with class right after another div on the homepage?](https://wordpress.org/support/topic/how-to-add-a-custom-div-with-class-right-after-another-div-on-the-homepage/)
 *  Thread Starter [ronthewebdev](https://wordpress.org/support/users/ronthewebdev/)
 * (@ronthewebdev)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/how-to-add-a-custom-div-with-class-right-after-another-div-on-the-homepage/#post-15470337)
 * The demo site is located here:
 * [http://ronr21.sg-host.com/](http://ronr21.sg-host.com/)
 * You will see the hero on the frontpage.
 * I want to place another image directly below it by creating a new div and class,
   but this is where the problem lies.
 * Thanks
    -  This reply was modified 4 years, 2 months ago by [ronthewebdev](https://wordpress.org/support/users/ronthewebdev/).
    -  This reply was modified 4 years, 2 months ago by [ronthewebdev](https://wordpress.org/support/users/ronthewebdev/).
 *   Forum: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
   
   In reply to: [How to add a custom div with class right after another div on the homepage?](https://wordpress.org/support/topic/how-to-add-a-custom-div-with-class-right-after-another-div-on-the-homepage/)
 *  Thread Starter [ronthewebdev](https://wordpress.org/support/users/ronthewebdev/)
 * (@ronthewebdev)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/how-to-add-a-custom-div-with-class-right-after-another-div-on-the-homepage/#post-15470333)
 * I will setup a demo site and respond back with a link.
 * Thanks
 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [How to close a popup when clicking outside of it?](https://wordpress.org/support/topic/how-to-close-a-popup-when-clicking-outside-of-it/)
 *  Thread Starter [ronthewebdev](https://wordpress.org/support/users/ronthewebdev/)
 * (@ronthewebdev)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/how-to-close-a-popup-when-clicking-outside-of-it/#post-15468807)
 * Okay, another Dev resolved this by using JQuery and tossed it into a php file.
 * This is the code they used:
 *     ```
       <script>
            let openModal = ''
            function modalShow(id){
                jQuery('#modal-'+openModal).hide();
                jQuery('#'+openModal).prop('checked', false);
                jQuery('#modal-'+id).show();
                openModal = id;
            }
            function modalClose(id){
                jQuery('#modal-'+id).hide();
                openModal = '';
            }
        </script>
       ```
   
 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [How to close a popup when clicking outside of it?](https://wordpress.org/support/topic/how-to-close-a-popup-when-clicking-outside-of-it/)
 *  Thread Starter [ronthewebdev](https://wordpress.org/support/users/ronthewebdev/)
 * (@ronthewebdev)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/how-to-close-a-popup-when-clicking-outside-of-it/#post-15468746)
 * So .ride-description is not a child element of .ride-image as shown from the 
   image below:
 * [https://1drv.ms/u/s!Ato5FqmByPPujOIEwrWFf5ooSw64aA](https://1drv.ms/u/s!Ato5FqmByPPujOIEwrWFf5ooSw64aA)
 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [How to close a popup when clicking outside of it?](https://wordpress.org/support/topic/how-to-close-a-popup-when-clicking-outside-of-it/)
 *  Thread Starter [ronthewebdev](https://wordpress.org/support/users/ronthewebdev/)
 * (@ronthewebdev)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/how-to-close-a-popup-when-clicking-outside-of-it/#post-15468713)
 * Apparently, every .ride-image element has an input type checkbox child item. 
   So, I guess when the image is selected, that would be the checkbox and then the
   corresponding .ride-description will display as shown from the screenshot below:
 * [https://1drv.ms/u/s!Ato5FqmByPPujOIDZZJ2410zn8f5Eg](https://1drv.ms/u/s!Ato5FqmByPPujOIDZZJ2410zn8f5Eg)
 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [How to close a popup when clicking outside of it?](https://wordpress.org/support/topic/how-to-close-a-popup-when-clicking-outside-of-it/)
 *  Thread Starter [ronthewebdev](https://wordpress.org/support/users/ronthewebdev/)
 * (@ronthewebdev)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/how-to-close-a-popup-when-clicking-outside-of-it/#post-15468631)
 * Here is a link to how the html looks using Google Inspector:
 * [https://1drv.ms/u/s!Ato5FqmByPPujOICyllIedkA5dQRCg](https://1drv.ms/u/s!Ato5FqmByPPujOICyllIedkA5dQRCg)
 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [How to close a popup when clicking outside of it?](https://wordpress.org/support/topic/how-to-close-a-popup-when-clicking-outside-of-it/)
 *  Thread Starter [ronthewebdev](https://wordpress.org/support/users/ronthewebdev/)
 * (@ronthewebdev)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/how-to-close-a-popup-when-clicking-outside-of-it/#post-15468602)
 * Your ridemodal variable has not been declared within the foreach block yet here:
 * const isHidden = rideModal.style.display === “none”;
 * Keep getting the following error:
 * Uncaught ReferenceError: Cannot access ‘rideModal’ before initialization
    at 
   HTMLDivElement.<anonymous> (gnet_custom_close_ride_modals.js?ver=1.0.0:16:20)
 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [How to close a popup when clicking outside of it?](https://wordpress.org/support/topic/how-to-close-a-popup-when-clicking-outside-of-it/)
 *  Thread Starter [ronthewebdev](https://wordpress.org/support/users/ronthewebdev/)
 * (@ronthewebdev)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/how-to-close-a-popup-when-clicking-outside-of-it/#post-15468450)
 * Thanks for the help, I appreciate it.
 * I will try this code out and let you know.
 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [How to close a popup when clicking outside of it?](https://wordpress.org/support/topic/how-to-close-a-popup-when-clicking-outside-of-it/)
 *  Thread Starter [ronthewebdev](https://wordpress.org/support/users/ronthewebdev/)
 * (@ronthewebdev)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/how-to-close-a-popup-when-clicking-outside-of-it/#post-15466804)
 * Okay thanks.
 * I have the following code now that works somewhat, but I have to click an image
   twice for the popup to display, but it goes away immediately:
 * **CODE**
 *     ```
       let rideImages = document.querySelectorAll(".ride-image");
       let rideModals = document.querySelectorAll(".ride-description");
   
       // Adding click event listener
       rideImages.forEach((rideImage) => {
         rideImage.addEventListener("click", function () {
           rideModals.forEach((rideModal) => {
             let isHidden = rideModal.style.display === "none";
             if (isHidden) {
               // Display hidden element
               rideModal.style.display = "block";
             } else {
               // Hide element
               rideModal.style.display = "none";
             }
           });
         });
       });
       ```
   

Viewing 10 replies - 1 through 10 (of 10 total)