๐ Version 5.0.5 - Enhanced Stability! A powerful, lightweight jQuery plugin for creating stunning modals, popups, lightboxes, and image slideshows. Perfect for modern web applications that need beautiful, accessible, and responsive dialogs.
๐ฏ 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.
โก Lightning Fast - Lightweight and optimized for performance. No bloat, just pure functionality.
๐จ 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.
๐ Backward Compatible - Upgrading from older versions? Your existing code will work without changes.
- Simple Modal Needs - Quick alerts, confirmations, or information dialogs
- Image 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
npm install jalert
<!-- 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',
title: 'Beautiful Image'
});
// Slideshow gallery
$.jAlert({
slideshow: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
slideshowOptions: {
autoAdvance: true,
showArrows: true,
showCounter: 'dots'
}
});
- Works perfectly on desktop, tablet, and mobile
- Touch-friendly controls and gestures
- Adaptive sizing for different screen sizes
- 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
12 built-in themes: default
, green
, red
, blue
, yellow
, brown
, gray
, black
, and dark variants.
- Full keyboard navigation (ESC, arrow keys)
- Basic screen reader support with ARIA attributes
- Focus management and semantic HTML
- Touch-friendly controls with swipe gestures
- Custom sizes and positioning
- Animation controls
- Auto-advance slideshows
- Loop and navigation options
๐ฎ Live Demo: View Interactive Examples
๐ Full Documentation: Complete API Reference
๐ Changelog: Version History
โฌ๏ธ Upgrade Guide: Migration Instructions
- jQuery 3.7.0+ (peer dependency)
- Modern browsers (Chrome 60+, Firefox 55+, Safari 12+, Edge 79+, IE11+)
git clone https://github.com/HTMLGuyLLC/jAlert.git
cd jAlert
npm install
# 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
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
MIT License - see LICENSE file for details.
- Issues & Bug Reports: GitHub Issues
- Questions & Discussions: GitHub Discussions
- Chat: Gitter
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