Awesome Open Source
Awesome Open Source


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





npm install --save jbox
import jBox from 'jbox';
import 'jbox/dist/jBox.all.css';


<script src=""></script>
<script src="[email protected]/dist/jBox.all.min.js"></script>
<link href="[email protected]/dist/jBox.all.min.css" rel="stylesheet">


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="" data-confirm="Do you really want to leave this page?">Click me!</a>


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

new jBox('Notice', {
 content: 'Hurray! A notice!'


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="">

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:

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (69,571
jquery-plugin (229
dialog (197
modal (121
alert (116
popup (111
tooltip (65
lightbox (50
image-gallery (27
popup-window (23
confirm (20