Skip to content
jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.
JavaScript CSS HTML
Branch: master
Clone or download

Latest commit

Latest commit 90700be Feb 24, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets/audio Refactoring to src, dist, assets Oct 25, 2018
demo Remove unused css Aug 20, 2019
dist Fix for issue #138 Feb 24, 2020
src Fix for issue #138 Feb 24, 2020
test Add test for assets Mar 12, 2019
.editorconfig Add editorconfig file May 8, 2019
.gitignore Update gitignore Oct 25, 2018
LICENSE Update license Mar 15, 2019
README.md Updated markup Dec 1, 2016
documentation.html Add email address Apr 25, 2019
gulpfile.js Force order of SCSS files May 12, 2019
package-lock.json Update version Feb 24, 2020
package.json Update version Feb 24, 2020

README.md

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

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:

<span class="tooltip" title="My first tooltip">Hover me!</span>
<span class="tooltip" title="My second tooltip">Hover me!</span>

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: '<i>Hello there!</i>'
});
<div id="myModal">Click me to open a modal window!</div>

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'
});
<div onclick="alert('Yay! You did it!')" data-confirm="Do you really want to do this?">Click me!</div>
<a href="https://stephanwagner.me/jBox" data-confirm="Do you really want to leave this page?">Click me!</a>

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');
<a href="/image-large.jpg" data-jbox-image="gallery1" title="My image"><img src="/image.jpg" alt=""></a>

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

You can’t perform that action at this time.