You could make use of CSS and a checkbox-hack as described here: https://css-tricks.com/the-checkbox-hack/ with an overlay demo shown here: http://codepen.io/Idered/pen/vytkH

As stated in the article and show in the demo you are able to hide a checkbox, attach a label referencing the checkbox id as for. Then on clicks show an overlay, which is otherwise not displayed. Adding on to that, you are also to add transitions to fade the modal/overlay in/out.

Example of CSS to make it work:

.modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  background: rgba(0,0,0, .9);
  transition: opacity .25s ease;
}    

.modal-state {
  display: none;
}

.modal-state:checked + .modal {
  opacity: 1;
  visibility: visible;
}

HTML:

<label class="btn" for="modal-1">Show me modal with a cat</label>
<input class="modal-state" id="modal-1" type="checkbox" />
<div class="modal">
</div>