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