Home >

Modal window without Javascript

Demo

Click here to read a funny poem.

Code

<p>Click <a href="#modal1">here</a> to open the modal.</p>

<div class="modal" id="modal1">
  <div class="content">
    <a class="close" href="#">×</a>
    Modal contents go here…
  </div>
</div>

.modal {
  display: grid;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, .5);

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  visibility: hidden;
}

.modal:target {
  visibility: visible;
}

.modal .content {
  width: 30rem;
  height: auto;
  background-color: WhiteSmoke;
  padding: .5rem 1rem 1rem 1rem;
  border: 1px solid DimGray;
}

CSS transitions are used used to fade in the bacgkround and pop in the modal:

.modal {
  transition: all 0.3s;
  opacity: 0;
}
.modal:target {
  opacity: 1;
}

.modal .content {
  transition: all 0.3s;
  transform: scale(0.7);
}
.modal:target .content {
  transform: scale(1);
}

Notes

Some downsides to this approach:

Modal cannot be closed by clicking on the background.
Modal cannot be closed by pressing a key like ESC.
Modal isn't draggable.
Modal transitions are remembered in browser history. Opening the modal, then going back will close the modal instead of going to the previous page.

These can be handled by Javascript while preserving modal functionality for people who have Javascript disabled.

An HTML <dialog> element exists, but it is not yet well supported.

Support

All major browsers.

Modal window without Javascript

Demo

Samson Agonistes

Code

Notes

Support

Sources