Michael_B Michael_B - 1 year ago 106
CSS Question

How does "#" (hashmark, number sign) close a modal box?

I recently read this article about creating a pure CSS modal box:

I've tested the code and it works great. I'm using it for my site's contact and register/log-in pages.

There is one part of the code I haven't fully grasped.

How does this...

<a href="#close" title="Close" class="close">X</a>

...close the box?

There is nothing in the CSS that hides or removes an element with a
class, nor any similar function targeting
. It's simply that one line of code by itself, and when the use clicks on it, the modal window closes (neatly and elegantly, I might add).

It's clear that the "close" text doesn't matter. The text could be anything and the function works. But if "#" is removed, the styling fails, but the window still closes.

So what's so special about "#"?

.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
transition: opacity 400ms ease-in;
pointer-events: none;
.modalDialog:target {
opacity: 1;
pointer-events: auto;
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
border-radius: 12px;
box-shadow: 1px 1px 3px #000;
.close:hover {
background: #00d9ff;

<a href="#openModal">Open Modal</a>

<div id="openModal" class="modalDialog">
<a href="#" title="Close" class="close">X</a>
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>

Answer Source

Expanding on my comment, this modal example is wholly dependent on the fragment identifier of the url. It is not only used to "trigger" the modal display in the first place but it is also used within the anchor link to suppress the href. The text following the # is irrelevant in this case and should be omitted.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download