Description
jBox is a powerful and flexible jQuery plugin, taking care of all your modal windows, tooltips, notices and more.
Demo: http://stephanwagner.me/jBox
Docs: http://stephanwagner.me/jBox/documentation
jBox alternatives and similar libraries
Based on the "Modals and Popups" category.
Alternatively, view jBox alternatives based on common mentions on social networks and blogs.
-
sweetalert2
✨ A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies. 🇺🇦 -
fancyBox
DISCONTINUED. jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable. -
-
-
Bootbox
Wrappers for JavaScript alert(), confirm() and other flexible dialogs using Twitter's bootstrap framework -
GLightbox
Pure Javascript lightbox with mobile support. It can handle images, videos with autoplay, inline content and iframes -
-
🦞 Modali
A delightful modal dialog component for React, built from the ground up to support React Hooks. -
hColumns
DISCONTINUED. jQuery.hColumns is a jQuery plugin that looks like Mac OS X Finder's column view for the hierarchical data. -
F$D€
F$D€ - Client not paid? Add opacity to the body tag and increase it every day until their site completely fades away -
ModalSquared.js
DISCONTINUED. ModalSquared.js is a super small less than a 1kb library for showing and hiding modals.
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of jBox or a related project?
README
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
Install
ES6
npm install --save jbox
import jBox from 'jbox';
import 'jbox/dist/jBox.all.css';
CDN
<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">
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