Modal

An overlay positioned within the viewport, displayed on top of the current page.

Triggering the handleOpen function causes the modal to open, while triggering the handleClose function causes the modal to close. The modal will also close when an element outside of the modal is clicked on.

Example

<gb-modal>
  <yield to="target">
    <div>
      Here is the content that triggers a modal window.
    </div>
    <gb-button onclick="{ handleOpen }">
      Open modal
    </gb-button>
  </yield>
  <yield to="content">
    <div>
      Here is the modal content.
    </div>
    <gb-button onclick="{ handleClose }">
      Close modal
    </gb-button>
  </yield>
</gb-modal>

Properties

State

Events

This component does not listen for any events.