jAlert

Simple jQuery (Modal | Popup | Lightbox | Alert) Plugin - ES5 compatible
jAlert - The Ultimate jQuery Modal & Lightbox Plugin
โจ Why Choose jAlert?
๐ฏ Perfect for jQuery Sites - If you're already using jQuery, jAlert integrates seamlessly without adding bulky dependencies. No need to learn new frameworks or rewrite existing code.
โก Zero Config - Include JS/CSS and add a modal immediately, no complicated setup.
๐จ Beautiful by Default - 12 built-in themes with smooth animations. Your modals will look professional out of the box.
๐ฑ Responsive Design - Works perfectly on desktop, tablet, and mobile with touch-friendly controls and swipe gestures.
โฟ Basic Accessibility - Keyboard navigation, screen reader support, and ARIA attributes for better usability.
๐ฏ When to Use jAlert
- Simple Modal Needs - Quick alerts, confirmations, or information dialogs
- Image & Video Galleries - Lightbox slideshows with navigation controls
- Content Previews - Show videos, iframes, or AJAX content in modals
- Form Dialogs - Login forms, contact forms, or any interactive content
- jQuery Projects - Perfect addition to existing jQuery-based websites
- Quick Prototypes - Get beautiful modals running in minutes, not hours
Browser Compatibility
Minimum browser versions that should fully support this plugin:
- Chrome: 30+
- Firefox: 28+
- Safari: 7+
- Edge: 12+
- Opera: 17+
- Internet Explorer: 11 (with jQuery polyfills, but MutationObserver support is limited)
Note: IE10 and below are not fully supported due to missing ES5 features and MutationObserver.
๐ Quick Start
Installation
npm install jalert
Basic Usage
<!-- Include jQuery first -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<!-- Include jAlert -->
<link rel="stylesheet" href="node_modules/jalert/dist/jAlert.min.css">
<script src="node_modules/jalert/dist/jAlert.min.js"></script>
// Simple alert
$.jAlert({
title: 'Success!',
content: 'Your action was completed successfully.',
theme: 'green'
});
// Image lightbox
$.jAlert({
image: 'path/to/image.jpg',
});
// Video lightbox
$.jAlert({
video: 'https://embed.youtube.com/my-video',
});
// Slideshow gallery
$.jAlert({
slideshow: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
slideshowOptions: {
autoAdvance: true,
showArrows: true,
showCounter: 'dots'
}
});
๐จ Key Features
๐ฑ Responsive & Mobile-Friendly
- Works perfectly on desktop, tablet, and mobile
- Touch-friendly controls and gestures
- Adaptive sizing for different screen sizes
๐ผ๏ธ Rich Media Support
- Images - Lightbox with zoom and navigation
- Videos - YouTube, Vimeo, and direct video files
- Slideshows - Multi-image galleries with controls
- Iframes - Embed any web content
- AJAX - Load dynamic content
๐ญ Beautiful Themes
14 built-in themes: default
, green
, red
, blue
, yellow
, orange
, brown
, gray
, black
, and dark variants (dark_green
, dark_red
, dark_blue
, dark_gray
, dark_orange
).
โจ๏ธ Keyboard & Accessibility
- Full keyboard navigation (ESC, arrow keys)
- Basic screen reader support with ARIA attributes
- Focus management and semantic HTML
- Touch-friendly controls with swipe gestures
โ๏ธ Flexible Configuration
- Custom sizes and positioning
- Animation controls
- Auto-advance slideshows
- Loop and navigation options
๐ Documentation & Examples
๐ฎ Live Demo: View Interactive Examples
๐ Full Documentation: Complete API Reference
๐ Changelog: Version History
โฌ๏ธ Upgrade Guide: Migration Instructions
๐ง Requirements
- jQuery 3.7.0+ (peer dependency)
- Modern browsers (see browser compatibility below)
๐ ๏ธ Development
Setup
git clone https://github.com/HTMLGuyLLC/jAlert.git
cd jAlert
npm install
Build & Test
# Build commands
npm run build # Production build (minified)
npm run dev # Development build with watch mode
# Test commands
npm test # Run unit tests only (fastest)
npm run test:unit # Run unit tests only (alias)
npm run test:e2e # Run end-to-end tests with Puppeteer
npm run test:all # Run unit + e2e tests (full test suite)npm
๐ Test Coverage:
- Unit Tests: Core functionality, slideshow features, and API methods
- E2E Tests: Real browser testing with Puppeteer for user interactions
- Visual Regression: Screenshot comparison testing for UI consistency
๐งช Test Requirements:
- E2E tests require Chrome/Chromium browser
- Visual tests may skip if browser dependencies are unavailable
- All tests work in CI/CD environments with
--no-sandbox
flag
๐ค Contributing
We welcome contributions! See our Contributing Guide for details.
Quick Start:
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests
- Submit a pull request
๐ License
MIT License - see LICENSE file for details.
๐ Support
- Issues & Bug Reports: GitHub Issues
- Questions & Discussions: GitHub Discussions
- Chat: Gitter
โ Support the Project
If jAlert has been helpful to you, consider buying me a coffee! Your support helps maintain and improve this project.
Made with โค๏ธ by HTMLGuy, LLC