Modal

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

Example

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

Use only the tag <nj-modal></nj-modal> if you choose the Web Component initialization method with Angular, React or VueJs frameworks.

<button type="button" class="nj-btn nj-btn--primary" data-toggle="modal" data-target="#exampleModal">
  Info modal
</button>
<nj-modal>
  <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">Info modal</h4>
          <button type="button" class="nj-modal__close" data-dismiss="modal" aria-label="Close">
            <i class="material-icons close-icon">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--outline-primary" data-dismiss="modal">Cancel</button>
          <button type="button" class="nj-btn nj-btn--primary">Submit</button>
        </div>
      </div>
    </div>
  </div>
</nj-modal>

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 nj-btn--primary" data-toggle="modal" data-target="#exampleModalSmall">
  Small modal
</button>
<button type="button" class="nj-btn nj-btn--primary" data-toggle="modal" data-target="#exampleModalDefault">
  Default modal
</button>
<nj-modal>
  <div class="nj-modal fade" tabindex="-1" id="exampleModalSmall" 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="exampleModalSmallLabel">Small modal</h4>
          <button type="button" class="nj-modal__close" data-dismiss="modal" aria-label="Close">
            <i class="material-icons close-icon">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--outline-primary" data-dismiss="modal">Cancel</button>
          <button type="button" class="nj-btn nj-btn--primary">Submit</button>
        </div>
      </div>
    </div>
  </div>
</nj-modal>
<nj-modal>
  <div class="nj-modal fade" tabindex="-1" id="exampleModalDefault" 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="exampleModalDefaultLabel">Default modal</h4>
          <button type="button" class="nj-modal__close" data-dismiss="modal" aria-label="Close">
            <i class="material-icons close-icon">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--outline-primary" data-dismiss="modal">Cancel</button>
          <button type="button" class="nj-btn nj-btn--primary">Submit</button>
        </div>
      </div>
    </div>
  </div>
</nj-modal>

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)`