WebAppers

/ best free open source web resources /

Shopify

CSS Modal Box without Javascript or Images

Posted · Category: License Free, Popup

Using CSS3 tech­niques a modal box can be cre­ated with­out JavaScript or images. With a bit of ani­ma­tion, tran­si­tion and trans­form, it can be made that lit­tle bit more special. Here we have CSS Modal by Paul Hayes.

The modal animation is hardware accelerated on Safari and iOS, which gives notable performance improvements. The animations are available in Chrome but will feel more sluggish. Firefox will see the opacity transition but not the bounce or minimise animation as it doesn’t yet support @keyframe.

However, it won’t work in IE8 and below, there’s no pointer-event sup­port and opac­ity is poorly imple­mented. IE9 sup­ports :tar­get but no pointer-events. Some IE spe­cific styles could eas­ily switch the opac­ity tog­gle to a dis­play or vis­i­bil­ity one.

css-modal

Requirements: Chrome or Firefox Browser
Demo: http://www.paulrhayes.com/experiments/modal/
License: License Free

7 Comments
  • Cassy

    The animation is a little staggered.

  • VV

    Looks great to me.

  • http://nwcic.com JB

    An interetingly simple approach.
    Pros: Seems like it would be faster and lighter.
    Cons: Not compatable with IE8-. Perhaps when that hurdle is overcome, this might be a better option than what is used currently. Let’s watch with interest.

  • http://www.webcentric.co.za MAREK | WEBCENTRIC

    Woul dhave been perfect if it wasn’t for the fact that it didn’t work in IE8. What a pity.. sigh. :-)

  • http://www.smart-techno.org Angelo

    Great effect, thanks lot,
    i used to create websites for my customers…

  • John

    Doesn’t work for me in IE9 or Opera 11 :(

  • Nicky Thomas

    Dear John,
    Do us Web Developers a favour and get a proper and more modern web browser.

    Regards
    Nicky

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons