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.7.1.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>
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: '#my-modal', title: 'My Modal Window', content: 'Hello there!' });
<div id="my-modal">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 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>
Notices
A notice will open automatically and destroy itself after some time:
new jBox('Notice', { content: 'Hooray! A notice!', color: 'blue', attributes: { y: 'bottom' } });
Images
Easily attach jBox to your images to open a lightbox:
new jBox('Image');
<a href="/image1_large.jpg" title="Title 1" data-jbox-image="gallery1"><img src="/image1_small.jpg" alt=""></a> <a href="/image2_large.jpg" title="Title 2" data-jbox-image="gallery1"><img src="/image2_small.jpg" alt=""></a> <a href="/image3_large.jpg" title="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.