Skip to main content

Modals v0.2.1+ HelixUI v0.2.1 or later required

Basic Modal

Open Modal

Demo Modal Header

This is the body of a demo modal. No further actions can happen on the page until this modal is closed.

<hx-disclosure aria-controls="demo-modal" class="hxBtn">
  Open Modal
</hx-disclosure>

<hx-modal id="demo-modal">
  <hx-modalhead>
    <h3>Demo Modal Header</h3>
  </hx-modalhead>
  <hx-modalbody>
    <p>
      This is the body of a demo modal. No further actions can happen
      on the page until this modal is closed.
    </p>
  </hx-modalbody>
  <hx-modalfoot>
    <button class="hxBtn hxPrimary">Confirm</button>
    <button class="hxBtn">Cancel</button>
  </hx-modalfoot>
</hx-modal>

See Also