Modals not using W3.css Framework

The use of a modal can be useful when it comes to the display of messages.

Background

When I was experimenting with W3.css I found that there was some interaction between my css and the framework. This did not present too much of a problem as I can make modals not using the framework. This is what I will do here.

The W3C Example

I am not sure how good or bad this modal example is - I will have to compare it to the CSS-Tricks example.

In this example the modal displays pretty much centrally on my laptop. The modal closes when a click is registered inside the modal background and when the close button is pressed. The modal does not close when a click is made in the "content" area or outside the modal. The page can be scrolled without closing the modal.

As I say there are problems inherent with modals and "touch" devices where the modal may not have the correct focus and therfore not respond in the same way as a mouse click. The W3C example of a simple modal does not close the modal when the screen is tapped in the grey section.