Comments on: Creating a modern modal with CSS

By: Stephan

Stephan — Sat, 15 Jun 2013 13:23:52 +0000

Hi,
have you tried this in IE10?
Any link element on your site is not longer recognized when you use the code above.

By: Michael Calkins

Michael Calkins — Fri, 09 Mar 2012 03:10:56 +0000

You solved a problem I was having with my own modal in this ty!

Keep using the newest tags that’s the way the future is going I love it!

By: joa

joa — Tue, 21 Feb 2012 17:32:49 +0000

Great work!

What is best way to open a modal with javascript? Adding a class with
opacity: 1;pointer-events: auto;
opens the modal, but without the bounce effect…

By: math-loust

math-loust — Mon, 09 Jan 2012 20:02:39 +0000

love this idea
thanks this is awesome

By: dalgard

dalgard — Wed, 14 Sep 2011 12:52:12 +0000

Overlay without extra markup…

I’ve also been looking for a way to do a semi-opaque overlay behind the modal using generated content (:before pseudo-element).

The trouble seems to be putting the modal in front; when using z-index on the modal the overlay (which must have a negative z-index) jumps in front for some reason, and without z-index on the modal it goes other elements in the page. One could put the entire page minus the modal in a container with a z-index of –2, but this is hardly a pretty solution.

Anyway, another way of doing a semi-opaque background would be adding an extreme box-shadow like this:

0 0 0 100000px rgba(0,0,0,0.3)

As much as this huge pixel value hurts my eyes, my browser doesn’t seem to care at all, not using any more resources resizing or doing whatever with this behemoth in the stylesheet.

It makes me wonder: How bad are monster values in CSS with regards to performance? How wrong is it to expect the user’s screen to be less than 141,421 pixels wide (supposed the modal has a border-radius)…?

By: css modal box

css modal box — Mon, 20 Jun 2011 14:26:16 +0000

This is super cool!!

By: Dan Owen

Dan Owen — Wed, 13 Apr 2011 15:53:53 +0000

CSS3 never fails to amaze. Thank you so much for making it all so accessible. Pity some people are using the shortcomings of IE as an excuse not to take advantage of the rich offerings of CSS3.

ps Love last.fm

By: Ca9ine

Ca9ine — Wed, 30 Mar 2011 17:30:29 +0000

This = awesome.
Thank heavens for CSS innovators like yourself!

I was checking out some modal scripts, and thought to myself that this should be done with CSS3 really; I seached, and of course here it is!

Hat-tip to you Mr. Hayes.

By: via

via — Wed, 30 Mar 2011 16:09:17 +0000

nice work dude. simple and beautiful

By: Fasal Salam

Fasal Salam — Thu, 24 Mar 2011 05:10:04 +0000

Awesome man.
This is a great experiment thanks!

By: Ian P

Ian P — Wed, 23 Mar 2011 09:45:50 +0000

A great demo, thanks. After years of such static CSS, I find this :target stuff deceptively tricky and your simple guide is appreciated. Nice one.

By: Raju

Raju — Tue, 22 Mar 2011 15:11:37 +0000

Awesome…but there is a small problem with Chrome 11 Beta.

By: Sinan Yasar

Sinan Yasar — Tue, 22 Mar 2011 12:57:12 +0000

Great demo, thanks! Hardware graphics will change the look of web very soon i believe. (At least for modern browser users)

By: Dustin Vogel

Dustin Vogel — Tue, 22 Mar 2011 12:50:34 +0000

@Cristy: It’s works very smooth in Safari… Looks great and @Jake, when you press back you get in the state before. Works perfectly.

By: Cristy

Cristy — Tue, 22 Mar 2011 12:45:35 +0000

Looks good after the animation is completed, but when animating it’s very jaggy and doesn’t look good…

By: Tim Mannino

Tim Mannino — Tue, 22 Mar 2011 12:35:53 +0000

I agree with Chris Coyler. This is a great experiment but you should certainly not discard js altogether in favor of a pure CSS solution. JS/jQuery+CSS3 (throw HTML5 in there too) are a match made in heaven and could stand up against Flash anyday.

By: Jake

Jake — Tue, 22 Mar 2011 12:35:15 +0000

Awesome! Until you press back

By: mohdhazwan

mohdhazwan — Tue, 22 Mar 2011 12:32:10 +0000

awesome man! seriously awesome.

By: Andy Dust

Andy Dust — Tue, 22 Mar 2011 12:22:45 +0000

Very neat, I experimented with the same technique awhile ago for a pure css lightwindow type photo gallery.

But as others have mentioned, the way :target/fragments works with browser history (and back/forward buttons) makes this solution untenable.

Andy.

By: David Leggett

David Leggett — Tue, 22 Mar 2011 12:21:46 +0000

This is wonderful, very well done!

Like Nicolas Gallagher noted, I’d say the major drawback right now is the back button reopening the modal.

By: Justin

Justin — Fri, 18 Mar 2011 22:21:43 +0000

So sad, so many nifty CSS only solutions tutorials around the web these days. Until there is better IE support, I just don’t have time to check them all out as much as I’d like to.

Thanks for the post. Simple solution. wish it could be standard.

By: Nicolas Gallagher

Nicolas Gallagher — Fri, 18 Mar 2011 15:27:25 +0000

This is a cool experiment. One other caveat I didn’t see mentioned is how clicking the back button after closing a modal re-triggers the appearance of the modals.

By: Milos

Milos — Fri, 18 Mar 2011 14:09:46 +0000

Really impressive, Paul. Probably going to recreate this over the weekend.

Keep up the good work.

By: Divya Manian

Divya Manian — Fri, 18 Mar 2011 03:18:48 +0000

A note that pointer-events property is not supported yet in HTML for Opera, however, it does work in SVG.

By: Chris Coyier

Chris Coyier — Fri, 18 Mar 2011 01:13:54 +0000

Love this, great work.

For anybody that looks at this and scoffs at the limited browser support, consider some slight alterations. Use JavaScript for the triggering it open and closed (instead of :target and pointer-events). Then you are still leveraging CSS for the design and funzies, but get way deeper browser support.