Analytics & Reports
Analytics

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

Property Type Default Description
autoOpen boolean false Whether to open the modal on mount/load.

State

Property Type Required Description
visible boolean The current state of the modal. On mount, is set to the value of autoOpen.

Events

This component does not listen for any events.