Categories
Plugins

jbox

jBox
jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.
Demo: https://stephanwagner.me/jBox
Docs: https://stephanwagner.me/jBox/documentation

Install

ES6
npm install –save jbox
import jBox from ‘jbox’;
import ‘jbox/dist/jBox.all.css’;

CDN

Tooltips
Create a new instance of jBox Tooltip and attach it to elements:
new jBox(‘Tooltip’, {
attach: ‘.tooltip’
});
Now elements with class=”tooltip” will open tooltips:
Hover me!
Hover me!

Modal windows
You can set up modal windows the same way as tooltips.
But most of times you’d want more variety, like a title or HTML content:
new jBox(‘Modal’, {
width: 300,
height: 200,
attach: ‘#myModal’,
title: ‘My Modal Window’,
content: ‘Hello there!
});

Click me to open a modal window!

Confirm windows
Confirm windows are modal windows which requires the user to confirm a click action on an element.
Give an element the attribute data-confirm to attach it:
new jBox(‘Confirm’, {
confirmButton: ‘Do it!’,
cancelButton: ‘Nope’
});

Click me!

Click me!

Notices
A notice will open automatically and destroy itself after some time:
new jBox(‘Notice’, {
content: ‘Hurray! A notice!’
});

Images
To create image windows you only need following few lines:
new jBox(‘Image’);


Learn more
These few examples are very basic.
The jBox library is quite powerful and offers a vast variety of options to customize appearance and behavior.
Learn more in the documentation: https://stephanwagner.me/jBox/documentation

GitHub Repo