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.

Simplemodal

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
Fancymodal

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.


Product Design Training from the Experts at ZURB


Reveal Modal Goodness

This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.

This is just a simple modal with the default styles, but any type of content can live in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis sem vel enim eleifend tristique. Etiam tincidunt faucibus pharetra.

×

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

×