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.

Markup


<aside id="modal">
	<header>
		<h2>Modal Heading</h2>
	</header>
	<section>
		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.
	</section>
	<footer class="cf">
		<a href="#" class="btn">Close</a>
	</footer>
</aside>

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.

CSS

 
/* Normal styles for the modal */
#modal {
	background:#fff;
	left:50%;
	margin:-250px 0 0 -40%;
	position:absolute;
	top:-50%;
	width:80%;
	border-radius:5px;
	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);
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
	/* Make the modal appear when targeted */
	#modal:target {
		top:50%;
		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 {
	background:#f7f7f7;
	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:none;
		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 {
	padding:15px;
	z-index:200;
}
#modal h2 {
	margin:0;
}
#modal .btn {
	float:right;
}

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!

Comments

  • http://twitter.com/MarcoIlardi Marco Ilardi

    doesn’t work on internet explorer

    • cameronbaney

      Unfortunately, :target does not work on Internet Explorer. So this should just be used with modern browsers

  • http://www.facebook.com/mahejo Martin Herman Johansen

    It works on EI10 just as fine as it works on Chrome.

  • dongnd

    Thank you very much Cameron. This is what I need today :)

  • Chris Flowers

    Everything not under the modal is still active.

    • cameronbaney

      Chris,
      I just updated this to version 2.0 which adds an overlay and new closing animation. Visit the GitHub to get the new version.

      • Chris Flowers

        Awesome. Thanks!

  • Christian Ocleana

    Great! thanks a lot!

  • Mohamed El-Naqash

    Thanks for ur nice work, dos it support to load external link in section instead the text?

  • Fernando Beck

    Great example! What would be the better way to make the modal window automatic (i.e.: on page load) instead of clicking the “Activate Modal” window?

    • cameronbaney

      Thank you very much. This can be done a few ways. The easiest is to add a hashtag on .ready() by location.hash = ‘modal’; The best would be to add a little bit of Javascript that would show and dismiss the modal, and not rely on the :target CSS3 property.

  • Loc

    I would like the Modal Window to open when the page loads up instead of clicking on a button.
    In the HTML page, I tried
    body onload=”#modal”
    which does not work.
    Is this even possible??

    • cameronbaney

      This can be done a few ways. The easiest is to add a hashtag on .ready() by location.hash = ‘modal’; The best would be to add a little bit of Javascript that would show and dismiss the modal, and not rely on the :target CSS3 property.

      • Loc

        I’m going crazy tryin to figure this out. I wrote a js function that would show and dismiss the modal as you have suggested but it doesn’t work.

        function overlay() {
        el = document.getElementById(“modal”);
        el.style.visibility = (el.style.visibility == “visible”) ? “hidden” : “visible”;
        }

        Can you maybe point me the right direction?

  • omigapun

    Although I ended up not needing a modal window, your straightforward approach has been very inspiring. Thank you Cameron!

  • hanqing zhao

    The html pages just scroll with the popup window, how could I solve that?

    • cameronbaney

      You can change the position on #modal to fixed if you do not want the modal to scroll.

      #modal {
      position: fixed;
      }

  • Nelson Lombardo

    Very helpful! Regards.

  • Amanda Fay Kruger

    Hello, I would like to open multiple modal windows with several links on one page. I’ve tried everything but its not working! Can you advise on how to do this??