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.
<nj-modal></nj-modal>
if you choose the Web Component initialization method with Angular, React or VueJs frameworks.
Info modal
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.
<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 |
Small modal
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.
Default modal
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.
<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) |