Create customizable tooltips, modal windows, image galleries – jBox jQuery Plugin

jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.
With jBox plugin, you can create

• Draggable modal box
• Animated notification
• Nice-looking tooltip
• Image gallery lightbox

Libraries

Piece of cake: Include jQuery, jBox.min.js and jBox.css. Ready to rock & roll!

<script src="https://code.jquery.com/jquery-3.3.1.min.js">script>
<script src="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/dist/jBox.all.min.js">script>
<link href="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/dist/jBox.all.min.css" rel="stylesheet">

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:

="tooltip" title="My tooltip">Hover me!>
="tooltip" title="Another tooltip">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: 100,
    attach: '#myModal',
    title: 'My Modal Window',
    content: 'Hello there!'
});

="myModal">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 the element the data-confirm attribute to attach it:

new jBox('Confirm', {
    confirmButton: 'Do it!',
    cancelButton: 'Nope'
});

Notices

A notice will open automatically and destroy itself after some time:

new jBox('Notice', {
    content: 'Hurray! A notice!',
    color: 'blue'
});

See live demo and download source code.

This awesome plugin is developed by StephanWagner. Visit their official github repository for more information and follow for future updates.

Related