Installation

ES6

You can install jBox via npm:

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

CDN

jsDelivr is a great CDN choice for jBox:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/StephanWagner/jBox@v1.3.3/dist/jBox.all.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/StephanWagner/jBox@v1.3.3/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:

<span class="tooltip" title="My tooltip">Hover me!</span>
<span class="tooltip" title="Another tooltip">Hover me!</span>
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: 100,
  attach: '#myModal',
  title: 'My Modal Window',
  content: '<i>Hello there!</i>'
});
 
<div id="myModal">Click me to open a modal window!</div>
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'
});
 
<div onclick="doit()" data-confirm="Do you really want to do this?">Click me!</div>
<a href="https://stephanwagner.me" data-confirm="Do you really want to leave this page?">Click me!</a>
Click me! Click me!

Notices

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

new jBox('Notice', {
  content: 'Hurray! A notice!',
  color: 'blue'
});
Click me to show a notice!

Images

Easily attach jBox to your images to open a lightbox:

new jBox('Image');
 
<a href="/image1_large.jpg" title="My title 1" data-jbox-image="gallery1"><img src="/image1_small.jpg" alt=""></a>
<a href="/image2_large.jpg" title="My title 2" data-jbox-image="gallery1"><img src="/image2_small.jpg" alt=""></a>
<a href="/image3_large.jpg" title="My title 3" data-jbox-image="gallery1"><img src="/image3_small.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.