Some time back in 2018, a fellow on this site that goes by AlexG had the same problem that I am having right now. He found some code from W3Schools that taught him how to create a modal, then multiple modals on his site, but when he tried to click outside the modals to close them, only 1 would close and the 2nd would not. A few users helped him, but after reading their replies, their advice went right over my head. You can lookup the page on FreeCodeCamp by searching, “Multiple modals - close on clicking outside function” (As a new user, I can only paste in 2 links - sorry!).
I wondered if I could revive this topic?
So, again, I used the following code from W3Schools (https://www.w3schools.com/howto/howto_css_modals.asp) to make make a modal, but that site does not teach one how to make multiple modals on a single page, so I sort of played around until I made it work. After creating multiple modals using unique IDs, I then had to create unique CSS and JS to make them work. They work, BUT clicking outside only closes 1 of the 2, and it’s always the last one. So, for example, if I create 2, the first modal will not close when clicking outside but #2 will. If I created 6, then #1-5 will not close, but #6 will.
The site address is: www.jdeclanflynn.com/sunscreen/modal.html
It uses a CSS file called modal2.css and the JS is in the HTML file toward the bottom.
I sure could use some assistance, and remember to explain it like I am very new to it because I am.
Thanks in advance! I really appreciate the help.