Teams help

Modal

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

angular logo Angularopen_in_new
react logo Reactopen_in_new
javascript logo Vanillaopen_in_new
angular logo Figmaopen_in_new

Last updated v5.0.0

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" tabindex="-1" id="exampleModal" role="dialog">
  <div class="nj-modal__dialog" role="document">
    <div class="nj-modal__content">
      <div class="nj-modal__header">
        <h4 class="nj-modal__title" id="exampleModalLabel">
          Confirm these settings?
        </h4>
        <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--secondary nj-modal__close" data-dismiss="modal" aria-label="Close">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </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>

<div class="nj-modal fade" tabindex="-1" id="exampleModal" role="dialog">
  <div class="nj-modal__dialog" role="document">
    <div class="nj-modal__content">
      <div class="nj-modal__header">
        <h4 class="nj-modal__title" id="exampleModalLabel">
          Confirm these settings?
        </h4>
        <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--secondary nj-modal__close" data-dismiss="modal" aria-label="Close">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </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

<div style="display: flex; flex-wrap: wrap; gap: 16px;">
  <button type="button" class="nj-btn" data-toggle="modal" data-target="#exampleModalStateInfo">
    Information modal
  </button>
  
  <button type="button" class="nj-btn nj-btn--secondary" data-toggle="modal" data-target="#exampleModalStateSuccess">
    Success information modal
  </button>
  
  <button type="button" class="nj-btn nj-btn--secondary nj-btn--subtle" data-toggle="modal" data-target="#exampleModalStateWarning">
    Warning information modal
  </button>
  
  <button type="button" class="nj-btn nj-btn--destructive" data-toggle="modal" data-target="#exampleModalStateError">
    Error information modal
  </button>
  
  <button type="button" class="nj-btn nj-btn--subtle" data-toggle="modal" data-target="#exampleModalStateLoading">
    Waiting information modal
  </button>
</div>


<div class="nj-modal nj-modal--information fade" tabindex="-1" id="exampleModalStateInfo" role="dialog">
  <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">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </button>
      </div>
      <div class="nj-modal__body">
        <i class="material-icons md--primary md-64 nj-modal__icon">info</i>
        <h4 class="nj-modal__title" id="exampleModalStateInfoLabel">
          Warning modal
        </h4>
        <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>


<div class="nj-modal nj-modal--information fade" tabindex="-1" id="exampleModalStateSuccess" role="dialog">
  <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">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </button>
      </div>
      <div class="nj-modal__body">
        <i class="material-icons md--success md-64 nj-modal__icon">check_circle</i>
        <h4 class="nj-modal__title" id="exampleModalStateSuccessLabel">
          Success modal
        </h4>
        <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>

<div class="nj-modal nj-modal--information fade" tabindex="-1" id="exampleModalStateWarning" role="dialog">
  <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">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </button>
      </div>
      <div class="nj-modal__body">
        <i class="material-icons md--warning md-64 nj-modal__icon">info</i>
        <h4 class="nj-modal__title" id="exampleModalStateWarningLabel">
          Warning modal
        </h4>
        <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>

<div class="nj-modal nj-modal--information fade" tabindex="-1" id="exampleModalStateError" role="dialog">
  <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">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </button>
      </div>
      <div class="nj-modal__body">
        <i class="material-icons md--danger md-64 nj-modal__icon">report_problem</i>
        <h4 class="nj-modal__title" id="exampleModalStateErrorLabel">
          Failure modal
        </h4>
        <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>

<div class="nj-modal nj-modal--information fade" tabindex="-1" id="exampleModalStateLoading" role="dialog">
  <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="sr-only">Loading...</span>
        </div>
        <h4 class="nj-modal__title" id="exampleModalStateLoadingLabel">
          Waiting modal
        </h4>
        <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" tabindex="-1" id="exampleModalSizeSmall" role="dialog">
  <div class="nj-modal__dialog nj-modal--sm" role="document">
    <div class="nj-modal__content">
      <div class="nj-modal__header">
        <h4 class="nj-modal__title" id="exampleModalSizeSmallLabel">Small modal</h4>
        <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--secondary nj-modal__close" data-dismiss="modal" aria-label="Close">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </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" tabindex="-1" id="exampleModalSizeDefault" role="dialog">
  <div class="nj-modal__dialog" role="document">
    <div class="nj-modal__content">
      <div class="nj-modal__header">
        <h4 class="nj-modal__title" id="exampleModalSizeDefaultLabel">Default modal</h4>
        <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--secondary nj-modal__close" data-dismiss="modal" aria-label="Close">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </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>

<div class="nj-modal nj-modal--vertical-centered fade" tabindex="-1" id="exampleModalCentered" role="dialog">
  <div class="nj-modal__dialog" role="document">
    <div class="nj-modal__content">
      <div class="nj-modal__header">
        <h4 class="nj-modal__title" id="exampleModalCenteredLabel">
          Confirm these settings?
        </h4>
        <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--secondary nj-modal__close" data-dismiss="modal" aria-label="Close">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </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>

With Icon

You can easily add an icon to your confirmation modal

<button type="button" class="nj-btn" data-toggle="modal" data-target="#exampleModalIcon">
  Modal with icon
</button>

<button type="button" class="nj-btn nj-btn--subtle nj-btn--destructive" data-toggle="modal" data-target="#exampleModalIconDanger">
  Destructive modal with icon
</button>

<div class="nj-modal fade" tabindex="-1" id="exampleModalIcon" role="dialog">
  <div class="nj-modal__dialog" role="document">
    <div class="nj-modal__content">
      <div class="nj-modal__header">
        <h4 class="nj-modal__title" id="exampleModalIconLabel">
          <i class="material-icons md--blue-corporate">info</i>Confirm these settings?
        </h4>
        <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--secondary nj-modal__close" data-dismiss="modal" aria-label="Close">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </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" tabindex="-1" id="exampleModalIconDanger" role="dialog">
  <div class="nj-modal__dialog" role="document">
    <div class="nj-modal__content">
      <div class="nj-modal__header">
        <h4 class="nj-modal__title" id="exampleModalIconLabel">
          <i class="material-icons md--danger">info</i>Delete the file?
        </h4>
        <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--secondary nj-modal__close" data-dismiss="modal" aria-label="Close">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </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>

<div class="nj-modal fade" tabindex="-1" id="exampleModalCheckbox" role="dialog">
  <div class="nj-modal__dialog" role="document">
    <div class="nj-modal__content">
      <div class="nj-modal__header">
        <h4 class="nj-modal__title" id="exampleModalCheckboxLabel">
          Confirm these settings?
        </h4>
        <button type="button" class="nj-icon-btn nj-icon-btn--lg nj-icon-btn--secondary nj-modal__close" data-dismiss="modal" aria-label="Close">
          <i class="nj-icon-btn__icon material-icons">close</i>
        </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>
              <input type="checkbox"> 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>

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').addEventListene('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...
});
arrow_back_ios

List-group

Navbar

arrow_forward_ios