Highly Customizable Fullscreen Modal Window – njBox

Category: Javascript , Modal & Popup | August 5, 2017
Author:Nejik
Views Total:722 views
Official Page:Go to website
Last Update:August 5, 2017
License:MIT

Preview:

Highly Customizable Fullscreen Modal Window – njBox

Description:

nitialize the njBox is a simple, flexible, highly customizable JavaScript modal library that lets you create responsive, fullscreen, lightbox-style modal windows from any html contents.

How to use it:

Download & import the njBox’s files into your web project.

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

Wrap the modal content into a container that should be hidden on page load.

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

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>

Or via JavaScript method:

<a href="#modalDiv" id="myModal">Trigger Element</a>
var myModal = new njBox('#myModal')

The library also provides an add-on which lets you create a gallery lightbox where the users are able to switch between images in the modal window just like a carousel.

<script src="dist/njBox-gallery.js"></script>
<div data-njb-gallery="a" data-toggle="modal">
  <a href="1.jpg"><img src="1.jpg"></a>
  <a href="2.jpg"><img src="2.jpg"></a>
  <a href="3.jpg"><img src="3.jpg"></a>
</div>

To config the modal library, pass the following options object as the 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
    }
    
})

You’re also allowed to config the modal directly via HTML ‘data-option’ attributes as these:

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

You Might Be Interested In:


Leave a Reply