Modal

Modal allows you to add dialogs to your site for lightboxes, user notifications, or completely custom content.

We are undergoing a migration, the following examples might not be up-to-date.

Please refer directly to the Storybook documentation based on your preferred framework.

Storybook documentations

Angular

React

Vanilla

Figma

Example

Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.

<button type="button" class="nj-btn" data-toggle="modal" data-target="#exampleModal">
  Basic confirmation modal
</button>

<div class="nj-modal fade" id="exampleModal" role="alertDialog" aria-labelledby="exampleModalLabel">
  <div class="nj-modal__dialog" role="document">
    <div class="nj-modal__content">
      <div class="nj-modal__header">
        <h1 class="nj-modal__title" id="exampleModalLabel">
          Confirm these settings?
        </h1>
        <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--secondary nj-modal__close" data-dismiss="modal" aria-label="Close">
          <span class="nj-sr-only">Close the modal</span>
          <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
        </button>
      </div>
      <div class="nj-modal__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p>
      </div>
      <div class="nj-modal__footer">
        <button type="button" class="nj-btn nj-btn--subtle" data-dismiss="modal">Cancel</button>
        <button type="button" class="nj-btn">Confirm</button>
      </div>
    </div>
  </div>
</div>

Fluid provides two types of modal: confirmation and information.

Confirmation

<button type="button" class="nj-btn" data-toggle="modal" data-target="#exampleModal">
  Confirmation modal
</button>
<button type="button" class="nj-btn nj-btn--subtle nj-btn--destructive" data-toggle="modal" data-target="#exampleModalDanger">
  Destructive modal
</button>
<button type="button" class="nj-btn" data-toggle="modal" data-target="#exampleModalAppendTo">
  Modal Append to Body
</button>

<div class="nj-modal fade" id="exampleModal" role="alertDialog" aria-labelledby="exampleModalLabel">
  <div class="nj-modal__dialog" role="document">
    <div class="nj-modal__content">
      <div class="nj-modal__header">
        <h1 class="nj-modal__title" id="exampleModalLabel">
          Confirm these settings?
        </h1>
        <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--secondary nj-modal__close" data-dismiss="modal" aria-label="Close">
          <span class="nj-sr-only">Close the modal</span>
          <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
        </button>
      </div>
      <div class="nj-modal__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p>
      </div>
      <div class="nj-modal__footer">
        <button type="button" class="nj-btn nj-btn--subtle" data-dismiss="modal">Cancel</button>
        <button type="button" class="nj-btn">Confirm</button>
      </div>
    </div>
  </div>
</div>

<div class="nj-modal fade" id="exampleModalDanger" role="alertDialog" aria-labelledby="exampleModalDangerLabel">
  <div class="nj-modal__dialog" role="document">
    <div class="nj-modal__content">
      <div class="nj-modal__header">
        <h1 class="nj-modal__title" id="exampleModalDangerLabel">
          Delete the file?
        </h1>
        <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--secondary nj-modal__close" data-dismiss="modal" aria-label="Close">
          <span class="nj-sr-only">Close the modal</span>
          <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
        </button>
      </div>
      <div class="nj-modal__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p>
      </div>
      <div class="nj-modal__footer">
        <button type="button" class="nj-btn nj-btn--subtle nj-btn--destructive" data-dismiss="modal">Cancel</button>
        <button type="button" class="nj-btn nj-btn--destructive">Delete</button>
      </div>
    </div>
  </div>
</div>

<div class="nj-modal fade" id="exampleModalAppendTo" role="alertDialog" data-appendTo="body" aria-labelledby="exampleModalAppendToLabel">
  <div class="nj-modal__dialog" role="document">
    <div class="nj-modal__content">
      <div class="nj-modal__header">
        <h1 class="nj-modal__title" id="exampleModalAppendToLabel">
          Confirm these settings?
        </h1>
        <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--secondary nj-modal__close" data-dismiss="modal" aria-label="Close">
          <span class="nj-sr-only">Close the modal</span>
          <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
        </button>
      </div>
      <div class="nj-modal__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p>
      </div>
      <div class="nj-modal__footer">
        <button type="button" class="nj-btn nj-btn--subtle" data-dismiss="modal">Cancel</button>
        <button type="button" class="nj-btn">Confirm</button>
      </div>
    </div>
  </div>
</div>

Information

Information modals comes in 5 flavors:

default information
success
warning
error
waiting

Information - default

<button type="button" class="nj-btn" data-toggle="modal" data-target="#exampleModalStateInfo">
  Default information modal
</button>
  
<div class="nj-modal nj-modal--information fade" id="exampleModalStateInfo" role="alertDialog" aria-labelledby="exampleModalStateInfoLabel">
  <div class="nj-modal__dialog" role="document">
    <div class="nj-modal__content">
      <div class="nj-modal__header">
        <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--secondary nj-modal__close" data-dismiss="modal" aria-label="Close">
          <span class="nj-sr-only">Close the modal</span>
          <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
        </button>
      </div>
      <div class="nj-modal__body">
        <span aria-hidden="true" class="material-icons nj-icon-material nj-icon-material--brand nj-icon-material--xxl nj-modal__icon">info</span>
        <h1 class="nj-modal__title" id="exampleModalStateInfoLabel">
          Information modal
        </h1>
        <p class="nj-modal__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet</p>
      </div>
      <div class="nj-modal__footer nj-modal__footer--centered">
        <button type="button" class="nj-btn nj-btn--subtle" data-dismiss="modal">Cancel</button>
        <button type="button" class="nj-btn">Confirm</button>
      </div>
    </div>
  </div>
</div>

Information - success

<button type="button" class="nj-btn" data-toggle="modal" data-target="#exampleModalStateSuccess">
  Success information modal
</button>
<div class="nj-modal nj-modal--information fade" id="exampleModalStateSuccess" role="dialog" aria-labelledby="exampleModalStateSuccessLabel">
  <div class="nj-modal__dialog" role="document">
    <div class="nj-modal__content">
      <div class="nj-modal__header">
        <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--secondary nj-modal__close" data-dismiss="modal" aria-label="Close">
          <span class="nj-sr-only">Close the modal</span>
          <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
        </button>
      </div>
      <div class="nj-modal__body">
        <span aria-hidden="true" class="material-icons nj-icon-material nj-icon-material--green nj-icon-material--xxl nj-modal__icon">check_circle</span>
        <h1 class="nj-modal__title" id="exampleModalStateSuccessLabel">
          Success modal
        </h1>
        <p class="nj-modal__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet</p>
      </div>
      <div class="nj-modal__footer nj-modal__footer--centered">
        <button type="button" class="nj-btn">Next</button>
      </div>
    </div>
  </div>
</div>

Information - warning

<button type="button" class="nj-btn nj-btn--secondary" data-toggle="modal" data-target="#exampleModalStateWarning">
  Warning information modal
</button>
<div class="nj-modal nj-modal--information fade" id="exampleModalStateWarning" role="alertDialog" aria-labelledby="exampleModalStateWarningLabel">
  <div class="nj-modal__dialog" role="document">
    <div class="nj-modal__content">
      <div class="nj-modal__header">
        <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--secondary nj-modal__close" data-dismiss="modal" aria-label="Close">
          <span class="nj-sr-only">Close the modal</span>
          <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
        </button>
      </div>
      <div class="nj-modal__body">
        <span aria-hidden="true" class="material-icons nj-icon-material nj-icon-material--orange nj-icon-material--xxl nj-modal__icon">info</span>
        <h1 class="nj-modal__title" id="exampleModalStateWarningLabel">
          Warning modal
        </h1>
        <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet</p>
      </div>
      <div class="nj-modal__footer nj-modal__footer--centered">
        <button type="button" class="nj-btn nj-btn--subtle" data-dismiss="modal">Cancel</button>
        <button type="button" class="nj-btn">Confirm</button>
      </div>
    </div>
  </div>
</div>

Information - error

<button type="button" class="nj-btn nj-btn--destructive" data-toggle="modal" data-target="#exampleModalStateError">
  Error information modal
</button>
<div class="nj-modal nj-modal--information fade" id="exampleModalStateError" role="alertDialog" aria-labelledby="exampleModalStateErrorLabel">
  <div class="nj-modal__dialog" role="document">
    <div class="nj-modal__content">
      <div class="nj-modal__header">
        <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--secondary nj-modal__close" data-dismiss="modal" aria-label="Close">
          <span class="nj-sr-only">Close the modal</span>
          <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
        </button>
      </div>
      <div class="nj-modal__body">
        <span aria-hidden="true" class="material-icons nj-icon-material nj-icon-material--red nj-icon-material--xxl nj-modal__icon">report_problem</span>
        <h1 class="nj-modal__title" id="exampleModalStateErrorLabel">
          Failure modal
        </h1>
        <p class="nj-modal__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet</p>
      </div>
      <div class="nj-modal__footer nj-modal__footer--centered">
        <button type="button" class="nj-btn">Retry</button>
      </div>
    </div>
  </div>
</div>

Information - waiting

<button type="button" class="nj-btn" data-toggle="modal" data-target="#exampleModalStateLoading">
    Waiting information modal
  </button>
  <div class="nj-modal nj-modal--information fade" id="exampleModalStateLoading" role="dialog" aria-labelledby="exampleModalStateLoadingLabel">
    <div class="nj-modal__dialog" role="document">
      <div class="nj-modal__content">
        <div class="nj-modal__body">
          <div class="nj-spinner nj-spinner--md nj-modal__loading-spinner" role="status">
            <span class="nj-sr-only">Loading...</span>
          </div>
          <h1 class="nj-modal__title" id="exampleModalStateLoadingLabel">
            Waiting modal
          </h1>
          <p class="nj-modal__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet</p>
        </div>
      </div>
    </div>
  </div>

Optional sizes

Modals have two optional sizes, available via modifier classes to be placed on a .nj-modal-dialog. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.

Size	Class	Modal max-width
Small	`.nj-modal--sm`	`440px`
Default	None	`560px`

<button type="button" class="nj-btn" data-toggle="modal" data-target="#exampleModalSizeSmall">
  Small modal
</button>
<button type="button" class="nj-btn" data-toggle="modal" data-target="#exampleModalSizeDefault">
  Default modal
</button>

<div class="nj-modal fade" id="exampleModalSizeSmall" role="alertDialog" aria-labelledby="">
  <div class="nj-modal__dialog nj-modal--sm" role="document">
    <div class="nj-modal__content">
      <div class="nj-modal__header">
        <h1 class="nj-modal__title" id="exampleModalSizeSmallLabel">Small modal</h1>
        <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--secondary nj-modal__close" data-dismiss="modal" aria-label="Close">
          <span class="nj-sr-only">Close the modal</span>
          <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
        </button>
      </div>
      <div class="nj-modal__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p>
      </div>
      <div class="nj-modal__footer">
        <button type="button" class="nj-btn nj-btn--subtle" data-dismiss="modal">Cancel</button>
        <button type="button" class="nj-btn">Submit</button>
      </div>
    </div>
  </div>
</div>
<div class="nj-modal fade" id="exampleModalSizeDefault" role="alertDialog" aria-labelledby="">
  <div class="nj-modal__dialog" role="document">
    <div class="nj-modal__content">
      <div class="nj-modal__header">
        <h1 class="nj-modal__title" id="exampleModalSizeDefaultLabel">Default modal</h1>
        <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--secondary nj-modal__close" data-dismiss="modal" aria-label="Close">
          <span class="nj-sr-only">Close the modal</span>
          <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
        </button>
      </div>
      <div class="nj-modal__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p>
      </div>
      <div class="nj-modal__footer">
        <button type="button" class="nj-btn nj-btn--subtle" data-dismiss="modal">Cancel</button>
        <button type="button" class="nj-btn">Submit</button>
      </div>
    </div>
  </div>
</div>

Optional positioning

You can center the modal with the nj-modal--vertical-centered class modifier.

<button type="button" class="nj-btn" data-toggle="modal" data-target="#exampleModalCentered">
  Centered modal
</button>
<button type="button" class="nj-btn nj-btn--subtle nj-btn--destructive" data-toggle="modal" data-target="#exampleModalCenteredDanger">
  Centered danger modal
</button>

<div class="nj-modal nj-modal--vertical-centered fade" id="exampleModalCentered" role="alertDialog" aria-labelledby="exampleModalCenteredLabel">
  <div class="nj-modal__dialog" role="document">
    <div class="nj-modal__content">
      <div class="nj-modal__header">
        <h1 class="nj-modal__title" id="exampleModalCenteredLabel">
          Confirm these settings?
        </h1>
        <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--secondary nj-modal__close" data-dismiss="modal" aria-label="Close">
          <span class="nj-sr-only">Close the modal</span>
          <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
        </button>
      </div>
      <div class="nj-modal__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p>
      </div>
      <div class="nj-modal__footer">
        <button type="button" class="nj-btn nj-btn--subtle" data-dismiss="modal">Cancel</button>
        <button type="button" class="nj-btn">Confirm</button>
      </div>
    </div>
  </div>
</div>

<div class="nj-modal nj-modal--vertical-centered fade" id="exampleModalCenteredDanger" role="alertDialog" aria-labelledby="exampleModalCenteredDangerLabel">
  <div class="nj-modal__dialog" role="document">
    <div class="nj-modal__content">
      <div class="nj-modal__header">
        <h1 class="nj-modal__title" id="exampleModalCenteredDangerLabel">
          Delete the file?
        </h1>
        <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--secondary nj-modal__close" data-dismiss="modal" aria-label="Close">
          <span class="nj-sr-only">Close the modal</span>
          <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
        </button>
      </div>
      <div class="nj-modal__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p>
      </div>
      <div class="nj-modal__footer">
        <button type="button" class="nj-btn nj-btn--subtle nj-btn--destructive" data-dismiss="modal">Cancel</button>
        <button type="button" class="nj-btn nj-btn--destructive">Delete</button>
      </div>
    </div>
  </div>
</div>

With Icon

You can easily add an icon to your confirmation modal

<button type="button" class="nj-btn" data-toggle="modal" data-target="#exampleModalIcon">
  Info modal
</button>
<button type="button" class="nj-btn nj-btn--subtle nj-btn--destructive" data-toggle="modal" data-target="#exampleModalIconDanger">
  Info modal
</button>

<div class="nj-modal fade" id="exampleModalIcon" role="alertDialog" aria-labelledby="exampleModalIconLabel">
  <div class="nj-modal__dialog" role="document">
    <div class="nj-modal__content">
      <div class="nj-modal__header">
        <h1 class="nj-modal__title" id="exampleModalIconLabel">
          <span aria-hidden="true" class="material-icons nj-icon-material nj-icon-material--brand">info</span>Confirm these settings?
        </h1>
        <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--secondary nj-modal__close" data-dismiss="modal" aria-label="Close">
          <span class="nj-sr-only">Close the modal</span>
          <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
        </button>
      </div>
      <div class="nj-modal__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p>
      </div>
      <div class="nj-modal__footer">
        <button type="button" class="nj-btn nj-btn--subtle" data-dismiss="modal">Cancel</button>
        <button type="button" class="nj-btn">Confirm</button>
      </div>
    </div>
  </div>
</div>

<div class="nj-modal fade" id="exampleModalIconDanger" role="alertDialog" aria-labelledby="exampleModalIconDangerLabel">
  <div class="nj-modal__dialog" role="document">
    <div class="nj-modal__content">
      <div class="nj-modal__header">
        <h1 class="nj-modal__title" id="exampleModalIconDangerLabel">
          <span aria-hidden="true" class="material-icons nj-icon-material nj-icon-material--red">info</span>Delete the file?
        </h1>
        <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--secondary nj-modal__close" data-dismiss="modal" aria-label="Close">
          <span class="nj-sr-only">Close the modal</span>
          <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
        </button>
      </div>
      <div class="nj-modal__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p>
      </div>
      <div class="nj-modal__footer">
        <button type="button" class="nj-btn nj-btn--subtle nj-btn--destructive" data-dismiss="modal">Cancel</button>
        <button type="button" class="nj-btn nj-btn--destructive">Delete</button>
      </div>
    </div>
  </div>
</div>

With Checkbox

<button type="button" class="nj-btn" data-toggle="modal" data-target="#exampleModalCheckbox">
  Confirmation modal with checkbox
</button>
<button type="button" class="nj-btn nj-btn--subtle nj-btn--destructive" data-toggle="modal" data-target="#exampleModalCheckboxDanger">
  Danger modal with checkbox
</button>

<div class="nj-modal fade" id="exampleModalCheckbox" role="alertDialog" aria-labelledby="exampleModalCheckboxLabel">
  <div class="nj-modal__dialog" role="document">
    <div class="nj-modal__content">
      <div class="nj-modal__header">
        <h1 class="nj-modal__title" id="exampleModalCheckboxLabel">
          Confirm these settings?
        </h1>
        <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--secondary nj-modal__close" data-dismiss="modal" aria-label="Close">
          <span class="nj-sr-only">Close the modal</span>
          <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
        </button>
      </div>
      <div class="nj-modal__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p>
      </div>
      <div class="nj-modal__footer">
        <div class="d-flex w-100 justify-content-between align-items-center">
          <div class="nj-checkbox">
            <label for="checkbox-1">
              <input type="checkbox" id="checkbox-1"> Don't show me again
            </label>
          </div>
          <div class="d-flex">
            <button type="button" class="nj-btn nj-btn--subtle" data-dismiss="modal">Cancel</button>
            <button type="button" class="nj-btn ml-1">Confirm</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="nj-modal fade" id="exampleModalCheckboxDanger" role="alertDialog" aria-labelledby="exampleModalCheckboxDangerLabel">
  <div class="nj-modal__dialog" role="document">
    <div class="nj-modal__content">
      <div class="nj-modal__header">
        <h1 class="nj-modal__title" id="exampleModalCheckboxDangerLabel">
          Delete the file?
        </h1>
        <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--secondary nj-modal__close" data-dismiss="modal" aria-label="Close">
          <span class="nj-sr-only">Close the modal</span>
          <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
        </button>
      </div>
      <div class="nj-modal__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p>
      </div>
      <div class="nj-modal__footer">
        <div class="d-flex w-100 justify-content-between align-items-center">
          <div class="nj-checkbox">
            <label for="checkbox-2">
              <input type="checkbox" id="checkbox-2"> Don't show me again
            </label>
          </div>
          <div class="d-flex">
            <button type="button" class="nj-btn nj-btn--subtle nj-btn--destructive" data-dismiss="modal">Cancel</button>
            <button type="button" class="nj-btn nj-btn--destructive ml-1">Delete</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Methods

Method	Description
`toggle`	Shows or hides the modal, according to his current state.
`show`	Shows the modal.
`hide`	Hides the modal.
`getInstance`	Static method which allows you to get the modal instance associated to a DOM element. You can use it like this: `Alert.getInstance(domElement)`

Events

ENGIE’s modal component exposes a few events for hooking into modal functionality.

Event	Description
`show.nj.modal`	This event fires immediately when the `show` instance method is called.
`shown.nj.modal`	This event is fired when the alert has been closed (will wait for CSS transitions to complete).
`hide.nj.modal`	This event fires immediately when the `hide` instance method is called.
`hidden.nj.modal`	This event is fired when the alert has been closed (will wait for CSS transitions to complete).

document.querySelector('.my-modal').addEventListener('show.nj.modal', () => {
// do something...
});
document.querySelector('.my-modal').addEventListener('shown.nj.modal', () => {
// do something...
});
document.querySelector('.my-modal').addEventListener('hide.nj.modal', () => {
// do something...
});
document.querySelector('.my-modal').addEventListener('hidden.nj.modal', () => {
// do something...
});

List

Multi-select

Modal

Storybook documentations

Example

Confirm these settings?

Modal types

Confirmation

Confirm these settings?

Delete the file?

Confirm these settings?

Information

Information - default

Information modal

Information - success

Information - warning

Warning modal

Information - error

Failure modal

Information - waiting

Optional sizes

Small modal

Default modal

Optional positioning

Confirm these settings?

Delete the file?

With Icon

infoConfirm these settings?

infoDelete the file?

With Checkbox

Confirm these settings?

Delete the file?

Methods

Events

Confirm these settings?

Delete the file?