jAlert

HTMLGuyLLC
esm Styles
jAlert JS library homepage jAlert JS library on GitHub jAlert JS library on npm Download jAlert JS library

Simple jQuery (Modal | Popup | Lightbox | Alert) Plugin - ES5 compatible

Version 6.0.0 License MIT
jAlert JS library homepage
jAlert JS library on GitHub
jAlert JS library on npm
Download jAlert JS library
Keywords
jquerymodalpopuplightboxalertplugin

Join the chat at https://gitter.im/jAlert/Lobby License Build npm

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:

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Add tests
  5. Submit a pull request

๐Ÿ“„ License

MIT License - see LICENSE file for details.

๐Ÿ†˜ Support

โ˜• Support the Project

If jAlert has been helpful to you, consider buying me a coffee! Your support helps maintain and improve this project.

โ˜• Buy me a coffee


Made with โค๏ธ by HTMLGuy, LLC