njBox

Highly customizable vanilla javascript modal window.

Also plugin can do lightboxes and tooltips/popovers.

React/Vue/Angular wrapper - todo

DOTA 2 popup example

Install
- npm
- manual
Dependencies
Usage
- "Native" dialogs (alert, confirm, prompt)
Addons
- Gallery addon
- Popover addon
Examples
Customization
Events
Tips && tricks
Modal instance structure
- Receiving instance
- Instance description
License

Install

npm

npm i njbox -S

manual

Download njBox.min.css and njBox.min.js files from the dist folder.
Include css in head

<link rel="stylesheet" href="njBox.min.css" />

Include js before closing </body> tag

<script src="njBox.min.js"></script>

Dependencies

Plugin have no dependencies and support all modern browsers (ie11+). But, if you need to support older browsers, you can include jQuery, plugin will find and use it, you don't need to configure anything here. Also if you need ie10, 9 for example, you can insert some polyfills without jQuery at all.

Usage

You can initialize plugin in few ways:

Bootstrap style autoinitialization (HTML api, without js at all), all settings you should set in data-njb-* attributes

Codepen example: simple modal HTML API

Codepen example: gallery HTML API

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

<!-- or gallery (with gallery addon)-->
<div data-njb-gallery="a" data-toggle="modal">
  <a href="img1.jpg"><img src="img1.jpg"></a>
  <a href="img2.jpg"><img src="img2.jpg"></a>
  <a href="img3.jpg"><img src="img3.jpg"></a>
</div>

Javascript style (if you need callbacks or advanced api)

Codepen example: simple modal JS API

Codepen example: gallery JS API

HTML

<a href="#modalDiv" id="myModal">Show popup</a>
<div id="modalDiv">
  my modal window
</div>

javascript

var modal = new njBox('#myModal')
// or
var modal = new njBox({elem:'#myModal'})
// or with options
var modal = new njBox('#myModal', {scrollbar:'show'})
// or
var modal = new njBox({elem: '#myModal', scrollbar:'show'})

// gallery example (only with gallery addon)
var gallery = new njBox({
  elem: '.gallery',
  gallery: 'a'
})

"Native" dialogs (alert, confirm, prompt)

You can easily imitate native dialogs with njBox!

Codepen example: "alert"

Codepen example: "confirm"

Codepen example: "prompt"

Addons

njBox very very friendly to customization, seems you can customize everything you want.

A convenient way to expand functionality of main plugin are addons, they add new cool features to main plugin, you can use them all together. Now njBox had 2 addons: lightbox gallery addon and popover addon. Usage is very simple, just add files after njBox.js.

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

Css for this addons already inside njBox.css.

Gallery addon

While main plugin allows to show single images, this addon adds possibility of galleries (lightboxes). For creating gallery, option "gallery" required. Also "wrap" element is required for gallery items, initialization can be produced only on one element, while all items inside.

Options added with gallery addon: gallery, arrows, start, loop, preload. Descriptions you can read in options section

Not only images can be inside, you can use any type of content in gallery.

Codepen example: gallery from multiple content types

HTML API example

<div data-njb-gallery="a" data-toggle="modal">
  <a href="#modal" data-njb-header="some header in this slide">modal link</a>
  <a href="img1.jpg" title="title via atribute">image one</a>
  <a href="img2.jpg" data-njb-title="title via data atribute">image two</a>
  <a href="img3.jpg">image three</a>
  <a href="img4.jpg">image four</a>
</div>

JS API example

<div class="gallery">
  <a href="#modal" data-njb-header="some header in this slide">modal link</a>
  <a href="img1.jpg" title="title via atribute">image one</a>
  <a href="img2.jpg" data-njb-title="title via data atribute">image two</a>
  <a href="img3.jpg">image three</a>
  <a href="img4.jpg">image four</a>
</div>

var gallery = new njBox({
  elem: '.gallery',
  gallery: 'a'
})

Popover addon

Besides classic modal windows you can simply create tooltips/popovers with just adding popover addon! For creating tooltip/popover, option "layout:popover" required.

Options added with popover addon: 'layout:popover', trigger, placement, reverse, offset, boundary. Descriptions you can read in options section

HTML API example

<button data-toggle="modal" data-njb-layout="popover" data-njb-content="My tooltip!">some text</button>

JS API example

<button class="tooltip">some text</button>

var tooltip = new njBox({
  elem: '.tooltip',
  layout: 'popover',
  content: 'My tooltip!'
})

Examples

You can find a lot of examples in collection at codepen!

Customization

Animation

Everyone loves beautiful animations. I made a very easy way to add animations to your modals.

For such purpose you have few options. Main option is "anim" (see options) it's space separated string for show/hide animations. All what this option does is adding this classes to modal.

Built in animations are: scale, scaleIn, scaleOut, fade, fadeIn, fadeOut. Default naimation - scale.

!!! IMPORTANT !!! If you want one animation for showing and hiding, simple set option anim like this (anim:'scale'). For hiding wil be used reversed animation of show animation with adding .njb-anim-reverse class. But if you want different animation for showing and hiding you CANNOT set anim:'scale fade', you SHOULD set anim:'scaleIn fadeOut'. By default plugin just reverse show animation when hiding if no hide animation presented

  <a href="#modal" data-toggle="modal" data-njb-anim="fade">show modal</a>

Integration with Animate.css

Using this library very very easy. Just add css animate.css file in you <head>. Then use desired animations in "anim" option. This library required additional 'animated' class. For this purposes you can use 'animclass' options (animclass: 'animated')

Codepen example: animation with Animate.css

<html>
  <head>
    <link rel="stylesheet" href="njBox.min.css">
    <link rel="stylesheet" href="animate.min.css">
  </head>
  <body>
    <button data-toggle="modal" data-njb-anim="zoomInDown zoomOutDown" data-njb-content="content">some text</button>
    <script src="njBox.js"></script>
  </body>
</html>

HTML API

Plugin supports declarative html api. You can initialize and set options with html only, without any js.

For init you should set set data-toggle="modal" or data-toggle="box" attribute. (can be changed in njBox.defaults.autobind)

For options you should set data-njb-* attributes. If you have many options, they can be setted via one attribute in json format - data-njb-options='{"backdrop":false, "close":"inside", "scrollbar":"show"}' Please note, that it should be a VALID JSON

P.S. You can't use callbacks with html api.