Drop-In Modals

For those using WebKit based browsers (Safari and Chrome), CSS3 effects and properties can help you create fast, simple modals by using transforms, animation, and some subtle design cues.

Note: Demo works best in Safari 4 or Chrome 5. In Firefox, you will not see the animation or gradients, but you will see the transforms.


Simple Modals

The simple modal style we show here is very basic, but effective. The modal itself is set to opacity: 0.0 and when we click the button it changes to opacity: 1.0. A -webkit-transition: opacity 0.25s linear on the shown state causes the fade in effect, so we only need javascript to change the state of the modal — not the animation.

Show the Simple Modal

Fancy Modal

This modal is shown and hidden in a similar manner. Instead of using opacity, we've used -webkit-transform: translateY(-570px) to push the modal off the top of the screen. Then a -webkit-transition: -webkit-transform 0.25s ease-in animates the change in translation to pull it down onto the screen.

We use a few properties like transforms, transitions and box shadows. Currently only Safari 4 supports transitions, but Firefox 3.5 supports transforms using the -moz-transform property and also supports -moz-box-shadow.

Show the Fancy Modal

Copyright ZURB, freely available for distribution under the MIT license.

Startup playground

Log in with your ZURB ID

Log in with Google

Don't have a ZURB ID? Sign up

Forgot password?

Sign up for a ZURB ID

Sign up with Google

Already have a ZURB ID? Log in