Modal

A overlayer dialog component

Properties#

Name	Description
.modal	The modal component
.modal-container	The modal container with a default max-width of `960px`
.modal-head	The modal content head.
.modal-body	The modal conten body.
.modal-footer	The modal content footer.
.open :target	The switch to control modal open/close
.is-modal-open	A semantic class to attch on `body` element to restrict scroll behavior

Features#

default#

The default modal container's background color is transparent. You may paint the color yourself.

<div class="modal" style="background: rgba(0,0,0,.25)">
  <div class="modal-container bg-white">
    <div class="modal-head">
      <!-- head content -->
    </div>
    <div class="modal-body">
      <!-- body content -->
    </div>
    <div class="modal-footer">
      <!-- footer content -->
    </div>
  </div>
</div>

container size#

Default container width is 960px.

width:

<div class="modal" style="background: rgba(0,0,0,.25)">
  <div class="modal-container bg-white" style="width: 320px">
    <div class="modal-head">
      <!-- head content -->
    </div>
    <div class="modal-body">
      <!-- body content -->
    </div>
    <div class="modal-footer">
      <!-- footer content -->
    </div>
  </div>
</div>

scrollable container/body#

When the content is longer than the screen height, the .modal-body becomes scrollable by default. Yet you could also make the .modal-container scrollable with a bit more changes.

<div class="modal overflow-y-auto" style="background: rgba(0,0,0,.25)">
  <div class="modal-container bg-white" style="max-height: initial">
    <div class="modal-head">
      <!-- head content -->
    </div>
    <div class="modal-body">
      <!-- body content -->
    </div>
    <div class="modal-footer">
      <!-- footer content -->
    </div>
  </div>
</div>