Responsive Modal Overlay/ Pop-up Text Message with Entrance Effects

A responsive, modal popup that shows a text message in a CSS3 semi-transparent overlay. With a zooming, fading, sweeping or dropping effect, thanks to CSS3 keyframe animations. Powered with a few lines of JavaScript.

Works in modern browsers and IE8+ (no animation effects in IE8/9).

View the source of this page to see the HTML markup, CSS and JS.

View Message 1 - zooming modal entrance

View Message 2 - fading modal entrance

View Message 3 - side-sweeping modal entrance

View Message 4 - dropping modal entrance


More demos and snippets

Did you find this useful? There are more demos and code snippets this way.