View Full Version : Resolved W3 Modals

05-26-2018, 06:06 PM
EDIT 1: Having some success with the coding here: http://w3schools.invisionzone.com/topic/55976-multiple-modal-boxes-on-webpage/. Will update test page when complete.

EDIT 2: RESOLVED Finally achieved the right look with multiple modals on a single page. Tested in multiple browsers and on multiple devices and appears to be functioning correctly and responsive. http://cisleon.org/model2.html

I'm trying to create a page with multiple modal windows. I thought I found exactly what I need at: https://www.w3schools.com/howto/howto_css_modals.asp.

I created the page and styled the modal exactly how I wanted: http://cisleon.org/model2.html. After creating the second modal (the page will need 9 modals), I found the script doesn't work by simply changing the ID.

I found a W3Schools page DOES allow for multiple modals on one page by changing the ID - https://www.w3schools.com/w3css/w3css_modal.asp - but isn't exactly what I'd like because:

The script is not external
It relies on the W3 stylesheet https://www.w3schools.com/w3css/4/w3.css

My goal

Mutliple modals on a single page
Modal script is external
Uses my own stylesheet

I'm trying to reverse engineer this and figure it out myself and have multiple test pages, but no luck so far. Any assistance would be greatly appreciated.