Highly Customizable Pure Javascript Modal Window/Lightbox/Popover

njBox is a highly customizable vanilla JavaScript library that allows you to create responsive, full-screen, Lightbox-style modal windows from any HTML content. The plugin can also make lightboxes and tooltips / popovers – React / Vue / Angular wrapper – todo.

material full screen dialog, full screen modal codepen, custom popup in android example, full screen dialog android github, full screen dialog android example

How to make use of it:

1. Download and import njBox files into your web project.

<link href="dist/njBox.css" rel="stylesheet">
<script src="dist/njBox.js"></script>

2. Wrap the conditional content in a container that should be hidden when the page is loaded.

<div id="modalDiv" style="display: none">Modal Content Here</div>

3. Create a trigger element to toggle the modal window via HTML data attributes:

<a href="#modalDiv" data-toggle="modal">Trigger Element</a>
<!-- or -->
<button data-toggle="modal" data-njb-content="#modalDiv">Trigger Element</button>

<a href="#modalDiv" id="myModal">Trigger Element</a>

var myModal = new njBox('#myModal')

4. The library also provides an add-on that allows you to create a Lightbox gallery where users can switch between images in the model window.

<script src="dist/njBox-gallery.js"></script>

5. To configure the conditional library, pass the following options object as a second parameter to the njBox method.

var myModal = new njBox('#myModal',{
    //(selector || dom\jQuery element) dom element for triggering modal
    elem: '', 
    //(string) content for modal
    content: undefined, 
    //(html || selector || text || template) type of content, if selector used, whole element will be inserted in modal. Template simila to html, but template inserted without .njb__body tag, directly to .njb
    type: '', 
    //(html) html that will be added as modal header (for first slide)
    header: undefined, 
    //(html) html that will be added as modal footer (for first slide)
    footer: undefined, 
    
    //(string) classnames(separated with space) that will be added to modal wrapper, you can use it for styling (theming)
    'class': false, 
    //(boolean false || number) zindex that will be set on modal, probably not a good idea to use this option, set it in css and use o.class instead
    zindex: false, 
    //(selector) appends modal to specific element
    container: 'body', 
    //(fixed || absolute), how popup will be positioned. For most cases fixed is good, but when we insert popup inside element, not document, absolute position sets automatically
    position: 'fixed', 
    //(boolean) should we set click handler on element(o.elem)?
    click: true, 
    //(selector || dom\jQuery element) additional elements that can trigger same modal window (very often on landing pages you need few buttons to open one modal window)
    clickels: '', 
    // //(boolean) should we show backdrop?
    backdrop: true, 
    //(boolean) if true, animation durations of modal will automatically sets to backdrop to be in sync (it can be calculatied automatically from css)
    backdropassist: true, 
    //(show || hide) should we hide scrollbar from page?
    scrollbar: 'hide', 
    //(boolean) click outside modal will close it, false also adds fancy animation when somebody tries to close modal with outside click
    out: true, 
    //(boolean) close modal when esc button pressed?
    esc: true, 
    //(inside || outside || boolean false) add close button inside or outside popup or don't add at all
    close: 'outside', 
    //(boolean || image) should we set maximum height of modal? if image is selected, only images will be autoheighted
    autoheight: 'image', 
    //(boolean false, selector) set focus to element, after modal is shown, also you may use autofocus attribute without this option
    autofocus: false, 
    //(boolean) focus previous modal window  (case when we open two or more modal windows)
    focusprevious: true, 
    //(string || boolean false) title (usually for image)
    title: false, 
    //(string || boolean false) attribute from which we gather title for slide (used basically in images)
    title_attr: 'title', 
    //(load || ready) we should wait until img will fully loaded or show as soon as size will be known (ready is useful for progressive images)
    img: 'ready', 
    //(init || show) should we load gallery images on init(before dialog open) or on open 
    imgload: 'show', 
    //(false || string) name of animation, or string with space separated 2 names of show/hide animation (default same as `scale scale`). 2 predefined animations are built in: scale and fade.
    anim: 'scale', 
    //(string) additional class that will be added to modal window during animation (can be used for animate.css or other css animation libraries)
    animclass: 'animated', 
    //(string || number || auto) duration of animations, or string with space separated 2 durations of show/hide animation. You can set 'auto 100' if you want to set only duration for hide. It should be used when problems with auto detection (but I have not seen this problem ^^)
    duration: 'auto', 
    //link to jquery (for modules without global scopr)
    jquery: undefined, 
    //(selector) this elements we will try to focus in popup shown after option o.autofocus
    _focusable: 'a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]', 
    //(selector) selector that will be used for autobind (can be used only with changing global default properties) Set it after njBox.js is inserted njBox.defaults.autobind = '.myAutoBindSelector'
    autobind: '[data-toggle~="box"], [data-toggle~="modal"]', 
    //custom template
    templates: {
      wrap: '<div class="njb-wrap"><div class="njb-items"></div></div>',
      backdrop: '<div class="njb-backdrop"></div>',
      modalOuter: '<div class="njb-outer"></div>',
      modal: '<div class="njb" tabindex="-1" role="dialog"></div>',
      body: '<div class="njb__body" role="document" data-njb-body></div>',
      header: '<header class="njb__header" data-njb-header></header>',
      footer: '<footer class="njb__footer" data-njb-footer></footer>',
      close: '<button type="button" class="njb-ui__close" data-njb-close><span aria-hidden="true">×</span></button>',
      focusCatcher: '<div tabindex="0" class="njb-focus-catch"></div>',
      preloader: '<div class="njb-preloader"><div class="njb-preloader__inner"><div class="njb-preloader__bar1"></div><div class="njb-preloader__bar2"></div><div class="njb-preloader__bar3"></div></div></div>',
      ui: '<div class="njb-ui"></div>',
      title: '<div class="njb-ui__title"><div class="njb-ui__title-inner" id="njb-title" data-njb-title></div></div>' //id in title used for accessibility
    },
    // custom text
    text: {
      _missedContent: 'njBox plugin: meow, put some content here...', //text for case, when slide have no content
      preloader: 'Loading...', //title on preloader element
      imageError: '<a href="%url%">This image</a> can not be loaded.',
      close: 'Close dialog', //title on close button
      ok: 'Ok', //text on 'ok' button when dialog modal(alert, prompt, confirm) or in any other custom type
      cancel: 'Cancel', //text on 'cancel' button when dialog modal(alert, prompt, confirm) or in any other custom type
      placeholder: '' //placeholder for prompt input
    }
    
})

6. You are also allowed to initialize the form directly via “data-option” HTML attributes like these:

<a href="#modalDiv" 
   id="myModal" 
   data-njb-backdrop="false" 
   data-njb-close="inside" 
   data-njb-scrollbar="show">
     Trigger Element
</a>

highly customizable fullscreen modal window, njBox Plugin/Github