Modal

Fully featured Modal Box component using CSS only, no JS at all

Example

Modal Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code

<input type="checkbox" class="cssonly-modal-checkbox" name="modal1" id="modal1" />
<label for="modal1">Show Modal</label>
<div class="cssonly-modal">
  <!-- Optional backdrop -->
  <label class="cssonly-modal-backdrop" for="modal1"></label>
  <!-- end -->
  <div class="cssonly-modal-content">
    <!-- Optional close button -->
    <label for="modal1" class="cssonly-modal-close"></label>
    <!-- end -->
    <div class="cssonly-modal-header">Modal Header</div>
    <div class="cssonly-modal-body">
      Lorem ipsum dolor...
    </div>
    <div class="cssonly-modal-footer">
      <!-- Optional close button -->
      <label for="modal1">Close</label>
      <!-- end -->
    </div>
  </div>
</div>

Options

CSS Variables

--animation-time: <time> // default value: 0.3s

Class names

  centered // vertically center the modal

HTML Options

The cssonly-modal-backdrop can be changed from <label> to a <div> tag, to make it static - non-clickable

Custom examples

No backdrop

Static backdrop

No close buttons

Vertically centered

No animation

Edit this page on GitHub
Table of Contents