Pure HTML5/CSS3 Responsive Modal Window

July 26, 2012 Freebies, Tutorials

CSS3 gives developers the ability to add some advanced features that was once only possible by using JavaScript. You can achieve the same effects and final product using just CSS3 that you could by using JavaScript. Using CSS3 to create a modal window does not take a hit on accessibility because all of the markup is still on the page, it is just hidden to start. You can also create animations using CSS transitions rather than JavaScript. You can even have a button to open and close the modal window using only CSS3 thanks to the :target psuedo-selector.

The :target psuedo-selector acts much like other psuedo-selectors act such as :active and :hover. When the user hovers over an element, the styles that are set for that element’s :hover state will be activated. The :target state for an element is when the browser targets that element, usually with a hash tag. For example, our modal element has the id “modal” on it, so the target state would be triggered when the browser has the hash tag #modal. This is how we activate our modal window.


<aside id="modal">
		<h2>Modal Heading</h2>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	<footer class="cf">
		<a href="#" class="btn">Close</a>

In this demo, I used HTML5 semantics. You can use whatever markup you would like, as long as the container has the proper ID on it.


/* Normal styles for the modal */
#modal {
	margin:-250px 0 0 -40%;
	box-shadow:0 3px 7px rgba(0,0,0,.25);
	-moz-box-shadow:0 3px 7px rgba(0,0,0,.25);
	-webkit-box-shadow:0 3px 7px rgba(0,0,0,.25);
	/* Make the modal appear when targeted */
	#modal:target {
		transition: all 0.4s ease-in-out;
		-moz-transition: all 0.4s ease-in-out;
		-webkit-transition: all 0.4s ease-in-out;
#modal header,#modal footer {
	border-bottom: 1px solid #e7e7e7;
	border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	#modal footer {
		border-top: 1px solid #e7e7e7;
		border-radius: 0 0 5px 5px;
		-moz-border-radius: 0 0 5px 5px;
		-webkit-border-radius: 0 0 5px 5px;
#modal section,#modal header, #modal footer {
#modal h2 {
#modal .btn {

The modal window will need two sets of styles, one for its normal state (hidden) and one for its :target state (shown). As usual, the modal’s look will be styled in its normal state, but we will hide it off screen using “top: -50%” so it is not always shown. In this example, we are going to be hiding it above the screen so we can have a sliding animation. You could also do a simple display:none to hide the modal, but there will not be a fancy animation when it is activated. When the element is targeted, we change the position of the modal to be on the screen by setting the top to 50%. Adding a CSS transition to the modal makes the transition from top:-50% to top:50% a smooth animation.

To close the window, you simply need to untarget the modal. To do this, you can select another target, but only if you want to target another element. In this case, we just want to close the modal so we are clearing the target by just linking to a blank hash tag, “#”.

Make it your own

Since this modal is done completely using CSS, it is completely flexible and you can change the design however you would like. If you use this modal, show it off by sharing a link in the comments below!