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 7 others and post a comment

Random jQuery Plug-ins

  • 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...

    Details

  • Checked checkbox-parent

    This tiny plug-in adds and removes a 'checked'-class to input[type=checkbox]'s parents. Very useful if you want to style the entire wrapping <label>-e...

    Details

  • Drag to Select

    Use this plug-in to allow your users to select certain elements by dragging a "select box". Works very similar to how you can drag-n-select files and ...

    Details

More Plug-ins

Recent Comments

  1. AL on "Accessible, Stylish Modal Windows With Modern CSS"

    @Matt - What exactly isn't working? "Not working" ...

  2. roboteich on "Accessible, Stylish Modal Windows With Modern CSS"

    This is hardly accessible. Screen reader focus is...

  3. Matt on "Accessible, Stylish Modal Windows With Modern CSS"

    I have tried to implement this, but for some reaso...

Page cached. Loaded in: 0.0069 second(s).
Last DB change: 2010-09-03 17:14:49
Last file change: 2010-08-12 15:31:16
Cache created: 2010-09-03 19:45:03