Modal content blocks are unclickable on live page

Support
#1

Hi

I’ve made a page with several modal content blocks. Suddenly only a few of those blocks cane be opened. When I click on them, nothing happens, no pop up window.

When I edit the page in the editor all the blocks can be opened fine, no issue. Page in question: https://www.focus.no/bimcon/

I tried updating plugins + theme to latest version to see if that helps, but no, after updating everything it’s still the same issue.

#2

Hi Jan,

Thanks for reaching out.

My browser’s “console” tab is telling me there’s a Javascript error that’s causing the modals to not work.

Upon closer look, I found there’s this code being outputted.

By the looks of it, what you’re trying to achieve is to track in Google Analytics when a Contact Form 7 form has been submitted. Can you confirm whether the following code has been added in X > Theme Options > JS

add_action('wp_footer', 'mycustom_wp_footer');

    function mycustom_wp_footer() {?>
        < script type = "text/javascript" >
            document.addEventListener('wpcf7mailsent', function(event) {
                ga('send', 'event', 'Contact Form', 'submit');
            }, false);
</script>
<?php
}

If so, please remove the following codes:

add_action('wp_footer', 'mycustom_wp_footer');

    function mycustom_wp_footer() {? >
             < script type = "text/javascript" >

… and…

</script>
<?php
}

So that what’s left is just this:

document.addEventListener('wpcf7mailsent', function(event) {
      ga('send', 'event', 'Contact Form', 'submit');
}, false);

Then check whether that solves the modal problem.

#3

Hi again Jan,

If you’re wondering why that code doesn’t work and why we need to remove certain parts of it, here’s the short explanation:

That code you’ve added is a combination of PHP code and Javascript code. That code was meant to be added in /x-child/functions.php.

So actually, if you remove that entire code from X > Theme Options > JS and put it in x-child/functions.php, it should work and the error would be gone (the modals will work again). So either this or the one I suggested in my previous response should work.

#4

Thank you for your reply, but none of the solutions seem to be working. The blocks are still unclikable.

Edit: After I edited the functions.php file I can no longer access wp-admin, it just gives me a generic error about technical difficulties. If I remove the code snippet then it works fine.

Edit2: I also totally removed all of the code in JS in theme options and it’s still not working.

#5

Hi Jan,

I can see there’s no more error on the console and confirm some modals is still not working. At this point we need to check the setup on the page on the content editor. My guest is, there’s some html mismatch that was causing an issue. Please check all the content of the modal. Make sure all open <div> has corresponding closing </div. Same with all other html elements. If you can’t find anything, please share credentials inside a secure note so we can double check. Thank you.

#6

Yes! There was a rogue div tag in one of the modal boxes which wasn’t closed properly. Everything is working fine now. Thank you very much!

#7

We’re glad all is working now.

Cheers!

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.