Skip to main content

Modal

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

Warn user for unsaving changes

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