HTML, CSS, JS - overlay window with...

User 2572713 Photo


Registered User
9 posts

Hi folks,

I' trying to add a semi-opaque overlay to my page that supports multiple modal popups.

The three popup boxes open OK without the need for Javascript, and, with the help of some Javascript, they close by mouse-clicking outside the popups.

Unfortunately, I can't get my overlay to work, without blocking the 'open-modal' buttons. I've tried wrapping the entire 'overlay' div around all the popup boxes, and I've tried keeping the popups outside of the overlay div.

Is there a way to fix this without blocking access to the buttons or without messing up the 'external close' feature?
Three files are attached: .index.html, style.css, and modal-script.js I would be grateful for any suggestions.

Thanks,

Adrian :/:rolleyes::(
Attachments:
Shaedandu

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.