jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.
See the codejBox is archived and no longer maintained.
This library was built for the jQuery ecosystem and reflects best practices of its time. It remains available for existing projects, but is not recommended for new development.
Thank you to everyone who used, starred, and contributed to jBox.
Demo: https://stephanwagner.me/jBox
Docs: https://stephanwagner.me/jBox/documentation
npm install --save jbox
import jBox from 'jbox';
import 'jbox/dist/jBox.all.css';
<script src="https://code.jquery.com/jquery-3.6.0.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">
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>
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 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>
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="">
</a>
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
1,141 followers · starred Jul 2014
3 followers · starred Sep 2015
jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.
See the codejBox is archived and no longer maintained.
This library was built for the jQuery ecosystem and reflects best practices of its time. It remains available for existing projects, but is not recommended for new development.
Thank you to everyone who used, starred, and contributed to jBox.
Demo: https://stephanwagner.me/jBox
Docs: https://stephanwagner.me/jBox/documentation
npm install --save jbox
import jBox from 'jbox';
import 'jbox/dist/jBox.all.css';
<script src="https://code.jquery.com/jquery-3.6.0.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">
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>
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 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>
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="">
</a>
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
1,141 followers · starred Jul 2014
3 followers · starred Sep 2015