Skip to main content

Modal

EXPERIMENTAL

Modals can be used to open a pop-up dialog box and provide critical information, warn user for leaving form without saving or ask for a decision. Modals disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.

By default, govgr-modal class hides the modal. Add the govgr-modal__open class in order to open the Modal programmatically.

Critical information​

Open this example in a new tab

Warn user for unsaving changes​

Open this example in a new tab

When to use this component​

Use the modal component with caution when you need to provide critical information or ask for a decision. Modals disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.

How it works​

You can use the HTML code snippet in the example above. The modal component uses JavaScript. Thus, in your implementation you need to:

  • add a button that will open the modal
  • create a function that handles the open/close events
  • hanle the confirm action