Paul Hayes

tag: modal

Improving the CSS only modal

In my orig­i­nal post I explained how to cre­ate a CSS only modal pop-up using :tar­get, pseudo-elements and pointer events. This had a num­ber of caveats, any browser that didn’t sup­port pointer events would see a non-clickable page and the forward/back con­trols would nav­i­gate through dia­logues, which is usu­ally unde­sir­able. This follow-up addresses those con­cerns and cre­ates a more production-ready version.

Creating a modern modal with CSS

Using CSS3 tech­niques a modal box can be cre­ated with­out JavaScript or images. With a bit of ani­ma­tion, tran­si­tion and trans­form, it can be made that lit­tle bit more spe­cial. In this exper­i­ment, click­ing an ‘open’ link pops up a dia­logue with a smooth hard­ware accel­er­ated bounce (where sup­ported). When open all other ele­ments on the page are non-clickable. Clos­ing the modal is also ani­mated, with a min­imise effect.