JavaScript Overlay Refuses to Finction Properly

Hello everyone!

I am very new to WordPress and I have no experience with JavaScript.

I am trying to run my own WordPress website and I am using an web application called Schedulicity to manage appointments for my services. They have two options by which I can have my clients make an appointment directly from my website. One is a “widget” that you can add to a specific web page and the other is an “overlay”. The problem is that they are both JavaScript.

I was able to use the “Hana Code Insert” plug in to utilize the “widget”. It basically embedded the output from the JavaScript into my “Page”.

I have tried 4 different ways to add the “overlay” to the website and every time I do, I get the same result. I have tried adding it to the header.php (after the wp_head() function and calling wp_enqueue_script(“jquery”); before wp_head – as instructed here) and footer.php (just before </body>). I have tried to use another plugin that inserts code in the sidebar, but that also didn’t work as expected.

What happens is the following:

When I click the button for the overlay to be displayed, it is supposed to work kind of like Lightbox 2. It is supposed to darken the background while my actual website is still visible and display the JavaScript output in the middle. However what does end up happening (no matter how I tried to load the script) is that I get the correct output, but the background is solid gray, instead of the semi-transparent black.

Am I doing something wrong here? Am I putting the code in the wrong place and that’s why it fails to show up properly? Or there is a problem with the code itself?

If anyone needs more information/clarification I would be happy to oblige. I wasn’t sure what information I need to give, since I am way over my head with all this JavaScript business.

Thanks in advance for all the help!