Modal Site Demo

Modal Site Demo, No JavaScript Needed

Using the CSS3 :target attribute we no longer need JavaScript to create modal dialogs. In fact we can enhance an entire website's user interface to not rely on JS and improve the accessibility with semantic markup and techniques that gracefully degrade.

Try any of the menu items above to see the modal dialogs in action. The "sub menu" includes a link to the search dialog, so you can see how transitioning from one to another behaves.

Also if you're on desktop shrink the window to see the "hamburger" style menu for mobile, where the main menu itself ALSO becomes a modal dialog!