Access options:

Accessible modal pop-up windows using CSS3

author: mike foskett incept: 8th March 2012

last update: 17th July 2012

Pure XHTML and CSS3 with zero JavaScript.

Requires a modern browser: Firefox, Chrome, Safari, Opera, or IEv9+. Exact versions will follow from full testing.

As usual IE requires JavaScript workarounds, not included here but should be simple enough.

Updated 17/07/2012 to repair an overflow issue in .popScroll for IEv6 & 7. I use the same code for a pop-up on Tesco Store Locator (though activation is different) which needed better support for older browsers.

Example:

Pop-up One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique volutpat est, fermentum posuere ligula pretium egestas. Cras id justo nibh, at laoreet nisi. Quisque accumsan faucibus malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla posuere molestie tincidunt. Maecenas vestibulum neque in lectus ullamcorper in accumsan lectus consequat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam egestas posuere lorem, ut accumsan sem rhoncus vel. Nulla eu justo metus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique volutpat est, fermentum posuere ligula pretium egestas. Cras id justo nibh, at laoreet nisi. Quisque accumsan faucibus malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla posuere molestie tincidunt. Maecenas vestibulum neque in lectus ullamcorper in accumsan lectus consequat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam egestas posuere lorem, ut accumsan sem rhoncus vel. Nulla eu justo metus.

Back to links
Back to links

Pop-up Two

Sed tristique volutpat est, fermentum posuere ligula pretium egestas. Cras id justo nibh, at laoreet nisi. Quisque accumsan faucibus malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla posuere molestie tincidunt. Maecenas vestibulum neque in lectus ullamcorper in accumsan lectus consequat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam egestas posuere lorem, ut accumsan sem rhoncus vel. Nulla eu justo metus.

Back to links
Back to links

Pop-up Three

Cras id justo nibh, at laoreet nisi. Quisque accumsan faucibus malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla posuere molestie tincidunt. Maecenas vestibulum neque in lectus ullamcorper in accumsan lectus consequat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam egestas posuere lorem, ut accumsan sem rhoncus vel. Nulla eu justo metus.

Back to links
Back to links

A complete commented bare bones demo version is available.

The XHTML

Activating links

Only need to be associated by the href fragment identifier.


<ul id="links">
  <li><a href="#pop1">Pop-up One</a></li>
  <li><a href="#pop2">Pop-up Two</a></li>
  <li><a href="#pop3">Pop-up Three</a></li>
</ul>
  

The pop-up block

Every fragment identifier must have an associated block id.


<div id="pop2" class="pop-up">
  <div class="popBox">
    <div class="popScroll">
      <h2>Pop-up Two</h2>
      <p>Blah, blah, blah. Yada, yada, yada.</p>
    </div>
    <a href="" class="close"><span>Close</span></span></a>
  </div>
  <a href="#links" class="lightbox">Back to links</a>
</div>
  

The CSS

Outside block

Takes over the whole display once activated via :target.


.pop-up {position:absolute; top:0; left:-500em}
.pop-up:target {position:static; left:0;}
  

First child block

Sets the pop-ups look, its size, position, and activation effect.


.popBox {
  background:#ffffff;

  /* alternatively fixed width / height and negative margins from 50% */
  position:absolute; left:30%; right:30%; top:30%; bottom:30%;

  z-index:1;
  /* padding:1%; removed 17/07/2012 */
  border:1px solid #3a3a3a;

  /* CSS3 rounded corners, drop-shadow and opacity fade in */
  -moz-border-radius:12px;
  border-radius:12px;
  -webkit-box-shadow:2px 2px 4px #3a3a3a;
  -moz-box-shadow:2px 2px 4px #3a3a3a;
  box-shadow:2px 2px 4px #3a3a3a;
  opacity:0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
:target .popBox {position:fixed; opacity:1;}

.popBox:hover {box-shadow:3px 3px 6px #5a5a5a;}
  

The lightbox

Is actually a link itself. On clicking it returns to the activating link set. How accessible.


.lightbox {display:none; text-indent:-200em; background:#000; opacity:0.4; width:100%; height:100%; position:fixed; top:0; left:0; bottom:0; right:0;}
:target .lightbox {display:block}
  

Close pop-up graphic

Is not a graphic but more CSS.


.close {
  position:absolute; top:-0.75em; right:-0.75em; display:block; width:1em; height:1em;
  font:bold large/1 arial, sans-serif; text-align:center; text-decoration:none;
  background:#000; border:3px solid #fff; color:#fff;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  border-radius: 1em;
  -moz-box-shadow: 0 0 1px 1px #3a3a3a;
  -webkit-box-shadow: 0 0 1px 1px #3a3a3a;
  box-shadow: 0 0 1px 1px #3a3a3a;
}
.close:before {content:"X"}
.close:hover {box-shadow:0 0 1px 1px #c00; background:#c00;}
.close span {text-indent:-200em; display:block;}
  

Pop-up content block

May be bigger than the space defined, therefore allow it to scroll.


/* .popScroll {max-height:99%; overflow-y:scroll;} removed 17/07/2012 */
.popScroll {position:absolute; top:9%; left:3%; right:3%; bottom:9%; overflow-y:auto; *overflow-y:scroll; padding-right:0.5em}
  

Acknowledgements

Furtherence

I'll write a script to get IE to behave at some point. Still to do sufficient cross-browser cross-platform testing and to find the minimum version numbers each feature requires.

Any issues please email me.

Site search & complementary navigation:

Site search:

Online tools

Most popular

Does your site communicate?

New to site