GitHub - StephanWagner/jBox: jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more. (original) (raw)

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

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!

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:

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