Articles Tagged with "css"
You are currently browsing 1 articles tagged with "css".
Accessible, Stylish Modal Windows With Modern CSS
Published Wednesday 12th of August 2009
With this tutorial I will try to show you a way to do accessible, stylish modal windows (complete with an overlay-div) without using a single image and just a couple of div-elements.
Our goal is to create a generic modal that can be re-used and that has these basic features:
Modals should be hidden by default, except if the user has JavaScript disabled
The modal should be centered in the view port, even as the user scrolls
The modal should have those semi-transparent, rounded corners I've been seeing a lot of lately :)
There should (obviously) be an overlay behind the modal, preventing the user from interacting with anything behind it
Clicking outside the modal (i.e. on the overlay) should hide the overlay as well as all open modals (could be optional)
Clicking a link pointing to a modal (a[href=#login] for example) should open the modal and display the overlay
Don't use any images and keep it accessible!
You can check out the example here. We'll kick off simple with the HTML.
Join 23 others and post a comment
Random jQuery Plug-ins
Live Search
Use this plug-in to turn a normal form-input in to a live ajax search widget. The plug-in displays any HTML you like in the results and the search-res...
Equal Height
This plug-in makes HTML-elements equal height by adjusting their min-height CSS properties. Of course IE6 has no clue what min-height means so the plu...
Ajax Loader
Use this plug-in when you want to inform your visitors that a certain part of your page is currently loading. The plug-in adds a faded 'loading-div' o...
