Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/StephanWagner/jBox
jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.
https://github.com/StephanWagner/jBox
alert confirm confirmation-dialog confirmation-modal customizable-tooltips dialog image-gallery javascript jbox jquery-plugin lightbox modal modal-dialog modal-window modal-windows notice popup popup-message popup-window tooltip
Last synced: about 1 month ago
JSON representation
jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.
- Host: GitHub
- URL: https://github.com/StephanWagner/jBox
- Owner: StephanWagner
- License: mit
- Created: 2014-04-19T12:37:51.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2024-06-18T08:02:11.000Z (6 months ago)
- Last Synced: 2024-10-29T15:34:39.370Z (about 2 months ago)
- Topics: alert, confirm, confirmation-dialog, confirmation-modal, customizable-tooltips, dialog, image-gallery, javascript, jbox, jquery-plugin, lightbox, modal, modal-dialog, modal-window, modal-windows, notice, popup, popup-message, popup-window, tooltip
- Language: JavaScript
- Homepage: https://stephanwagner.me/jBox
- Size: 2.18 MB
- Stars: 1,402
- Watchers: 92
- Forks: 274
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-javascript - jBox - jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more. - ★ 965 (Modals and Popups)
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
```bash
npm install --save jbox
```
```javascript
import jBox from 'jbox';
import 'jbox/dist/jBox.all.css';
```
### CDN
```html
```
---
## Tooltips
Create a new instance of jBox Tooltip and attach it to elements:
```javascript
new jBox('Tooltip', {
attach: '.tooltip'
});
```
Now elements with `class="tooltip"` will open tooltips:
```html
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:
```javascript
new jBox('Modal', {
width: 300,
height: 200,
attach: '#myModal',
title: 'My Modal Window',
content: 'Hello there!'
});
```
```html
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 an element the attribute data-confirm to attach it:
```javascript
new jBox('Confirm', {
confirmButton: 'Do it!',
cancelButton: 'Nope'
});
```
```html
Click me!
Click me!
```
---
## Notices
A notice will open automatically and destroy itself after some time:
```javascript
new jBox('Notice', {
content: 'Hurray! A notice!'
});
```
---
## Images
To create image windows you only need following few lines:
```javascript
new jBox('Image');
```
```html
```
---
## 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
