CSS Only Static Modal Window

Preview:

Description:

Yet another CSS solution to creating Bootstrap style modal windows that load content from inline html.

How to use it:

Place the main CSS file ‘modal.css’ in the header of the document.

<link href="modals.css" rel="stylesheet">

Create the modal content.

<div class="modal">
  <div class="modal-header">
    <h3>Modal Title</h3>
    <label for="modal">
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAdVBMVEUAAABNTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU0N3NIOAAAAJnRSTlMAAQIDBAUGBwgRFRYZGiEjQ3l7hYaqtLm8vsDFx87a4uvv8fP1+bbY9ZEAAAB8SURBVBhXXY5LFoJAAMOCIP4VBRXEv5j7H9HFDOizu2TRFljedgCQHeocWHVaAWStXnKyl2oVWI+kd1XLvFV1D7Ng3qrWKYMZ+MdEhk3gbhw59KvlH0eTnf2mgiRwvQ7NW6aqNmncukKhnvo/zzlQ2PR/HgsAJkncH6XwAcr0FUY5BVeFAAAAAElFTkSuQmCC" width="16" height="16" alt="">
    </label>
  </div>
  <p>Modal Content</p>
</div>

Create the background overlay of the modal window.

<label for="modal" class="modal-background"></label>

Create a trigger element to toggle the modal window. Done.

<input type="checkbox" id="modal">
<label for="modal" class="example-label">Open Modal</label>