The other day I had this crazy idea. Popup/modal windows used in modern web design require JavaScript to be enabled in order to function. I wondered if you could get it working without JavaScript. It turns out you can.

See the Pen Popup/Modal without JS by Paul (@peiche) on CodePen.0

How it works

You know what a target link is? You click on a link, and it’ll jump to a specific point on a page. You give the target an id, and you link to it like so:

<a href="#target">Link to #target</a>
<div id="target"></div>

There is a CSS pseudoclass called :target that allows a targeted element to be styled differently. A typical use would be to highlight the section that you just jumped to. It’s simple enough to style it:

div:target {
  /* styles go here */
}

Here’s something super simple in action:

See the Pen Link Jump + Highlight by Paul (@peiche) on CodePen.0

This will work on pretty much any modern browser, by the way. Chrome, Safari, Firefox, Opera, and Internet Explorer all support it. The caveat is that it depends on the :target pseudoclass, so it won’t work on Internet Explorer 8 or lower. But would you be running that anyway?

Anyway, back to creating a popup window. Instead of having a visible container that changes styles on the jump, I’m defining the container as an overlay. So the first thing to do is create a container, which I’m giving a class of overlay.

<div class="overlay">
</div>

This isn’t the popup itself, but rather the backdrop for the popup. So before we create the popup itself, let’s define the overlay. (This is pretty standard stuff, and will prevent the user from clicking onto the page behind the popup.)

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
  transition: opacity 200ms;
  visibility: hidden;
  opacity: 0;
}

You’ll notice the last two styles are changing the overlay’s visibility and opacity. We could just use display: none instead, but then the CSS wouldn’t animate our transition. This way, the overlay (and popup, once we create it) will fade smoothly into view, instead of suddenly popping into view.

So now we’re ready to create our popup. Its markup will be placed inside our overlay, like so:

<div class="overlay">
  <div class="popup">
  </div>
</div>

The styles for the popup don’t have to be anything special. I’m treating mine like a dialog box, so it’s not very large. Since this is a simple test, I’m not doing anything for multiple screen sizes, although if this were a real world scenario, I would recommend making it responsive.

.popup {
  margin: 75px auto;
  padding: 20px;
  background: #fff;
  border: 1px solid #666;
  width: 300px;
  box-shadow: 0 0 50px rgba(0,0,0,0.5);
  position: relative;
}

So how do we get the popup to display? First, we need a link to open it. So let’s make one:

<a href="#popup1">Click Me</a>

Now we need to match up what the link is calling, #popup1, with our overlay. So we’ll add the id to the overlay div:

<div id="popup1" class="overlay">
  <div class="popup">
  </div>
</div>

It won’t work yet, because we haven’t added the style to show the overlay. Let’s do that now.

.overlay:target {
  visibility: visible;
  opacity: 1;
}

All we’re doing is changing those visibility styles so that the overlay is now visible. Everything else is already defined, and now we can click on our link to show our popup. Doing so will actually change the url, since it’s a target link, just like any “jump to section” link.

So how do we close the popup? Simple. We just need to move the target away from our overlay div, so we’ll make a link inside the popup with an href of “#”.

<a href="#">&times;</a>

&times; will make a times-symbol-style x, so we can style it to look just like a window-close x.

.close {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 20px;
  right: 20px;
  opacity: 0.8;
  transition: all 200ms;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  color: #666;
}

And there we go, a working dialog box, complete with close button. All we have to do now is put content inside it. Of course, this isn’t something I’d expect anyone to actually implement; after all, it’s pretty standard to expect JavaScript to be enabled on modern websites. It was just a proof of concept, and I’m pretty happy to discover that it works.

I think that second popup in my code is especially cool. The popup’s close link isn’t in the popup; rather, it’s set outside the popup, styled as a secondary overlay. The resulting effect is being able to click anywhere outside the popup to close it.

Husband. Daddy. Programmer. Artist. I'm not an expert, I just play one in real life.
  • I enjoyed your article!

  • Great web design and article thx!

  • and how am I supposed to popy/caste this like I throw all my sites together, hmm? ;-))

  • pageold

    hi.. thank you for your tutorial. it works extremely good! anyway, do u have any idea how to make when the pop up appeared, it is just appear on that particular scrolled page, not refreshing the page.. any idea? thanks :)

  • Tom Messerschmidt

    Hey, really nice tutorial. This is very useful! :D

  • shahi

    Hi pageold,

    You can use animation with keyframe. so that you can control whatever you want.

  • Sam

    Hi! Great tutorial, but my specific situation requires even more lean approach – I can use inline CSS only! So, no pseudo-elements whatsoever. Is there a way to do this or “Popup windows without JavaScript, mark II” without any pseudo-elements? Thanks!