Petal

Modals

modals.less

Basic Modal

<div class="modal">
  <span class="close-btn"></span>

  <div class="modal-header">
    <h3 class="modal-header-text">Header text</h3>
    <p class="sub">Header caption</p>
  </div>
  <div class="modal-body">
    <p>...</p>
  </div>
  <div class="modal-footer btn-row">
    <button class="btn hollow gray">Cancel</button>
    <button class="btn green align-right">Confirm</button>
  </div>
</div>

Petal provides preset layout and style for a generic modal. The basic modal only includes code for basic styling of the modal so you can freely set the position of the modal.

Basic modal has only a small minimum width and height set, so it will stretch according to your content inside or you will have to manually set size.

Classes you can use: .modal-header, .modal-body, .modal-footer for inner containers inside .modal; .modal-header-text and p.sub for modal header text styling; .close-btn for modal close button with cross icon (absolute top-right position).

Full-page Modal

<div class="fullpage-modal-container">
  <div class="overlay"></div>
  <div class="fullpage-modal-inner-wrap">
    <div class="fullpage-modal">
      <span class="close-btn"></span>

      <div class="modal-header">
        <h3 class="modal-header-text">Header text</h3>
        <p class="sub">Header caption</p>
      </div>
      <div class="modal-body">
        <p>...</p>
      </div>
      <div class="modal-footer btn-row">
        <button class="btn hollow gray">Cancel</button>
        <button class="btn green align-right">Confirm</button>
      </div>
    </div>
  </div>
</div>

Full-page modals on the other hand are made for rather larger-sized modals that will fill the center of the page. Petal provides preset layout classes to position the modal in center of the page using nested table properties to ensure modal will be positioned consistently regardless of inner content's size.