Why Choose jAlert?

Everything you need to create stunning modal experiences

Flexible Sizing

Choose from predefined sizes or set custom dimensions. Fully responsive with optimized touch support.

Beautiful Themes

16+ built-in themes with dark and light variants. Easy to customize with CSS variables.

Lightbox Features

Display images, videos, iframes, and AJAX content. Built-in slideshow with navigation controls.

Getting Started

Up and running in seconds

1. Install via npm
npm install jalert
2. Include Files
<!-- CSS -->
<link href="node_modules/jalert/dist/jAlert.css" rel="stylesheet">

<!-- jQuery -->
<script src="jquery.min.js"></script>

<!-- jAlert -->
<script src="node_modules/jalert/dist/jAlert.js"></script>

<!-- Optional: Quick Functions -->
<script src="node_modules/jalert/src/jAlert-functions.js"></script>
3. Basic Usage
// Simple alert
$.jAlert({
  title: 'Hello!',
  content: 'Welcome to jAlert!',
  theme: 'blue'
});

// With data attributes
<a href="#" data-jAlert 
   data-title="Hi" 
   data-content="I opened!">
   Click me
</a>
4. Quick Functions (Optional)
Optional Enhancement: Include jAlert-functions.js for simplified wrapper functions that make common alerts even easier to use.
Warning: This overrides the default alert function.
<!-- Include the optional functions file -->
<script src="node_modules/jalert/src/jAlert-functions.js"></script>

<!-- Now you can use simplified functions -->
<script>
// Simple alerts
alert('Basic message');
alert('Title', 'Message with title');

// Themed alerts
successAlert('Operation completed!');
errorAlert('Something went wrong!');
warningAlert('Please check your input.');
infoAlert('Here is some information.');

// Confirmation dialog
confirm(function() {
  console.log('User confirmed');
}, function() {
  console.log('User cancelled');
});

// Slideshow
slideshowAlert([
  'image1.jpg',
  'image2.jpg', 
  'image3.jpg'
], {
  autoAdvance: true,
  interval: 3000
});
</script>
Upgrading from an older version?

Check out our upgrade guides for detailed migration instructions:

Documentation

Complete API reference and examples

Options

Option Type Default Version Description
title string false 4.0 Modal title text (supports HTML). If false, no title bar is shown and modal content extends to full height.
content string false 4.0 Modal content text or HTML. Ignored when using image, video, iframe, ajax, or slideshow options.
theme string 'default' 4.0 Color theme name for the modal. View all available themes.
size string/object false 4.0 Modal size preset (xsm, sm, md, lg, xlg, full, auto) or custom dimensions object {width: '500px', height: '300px'}. CSS units (px, %, em, rem) are supported. View all sizes.
showAnimation string 'fadeInUp' 4.0 Animation for showing the modal: fadeInUp, fadeIn, slideDown, etc. View all animations.
hideAnimation string 'fadeOutDown' 4.0 Animation for hiding the modal: fadeOutDown, fadeOut, slideUp, etc. View all animations.
type string 'modal' 4.0 Type of modal: modal or confirm. Confirm type shows confirm/deny buttons.
blurBackground boolean false 4.0 Blur background elements when modal is open.
closeOnClick boolean false 4.0 Close modal when clicking outside the modal area.
closeOnEsc boolean true 4.0 Close modal with Escape key.
confirmQuestion string 'Are you sure?' 4.0 Question text for confirmation dialogs (used with type: 'confirm').
noPadContent boolean true 4.0 Remove padding from modal content area. Default behavior in v6.0+.
fullscreen boolean false 4.5 Display modal in fullscreen mode.
class string '' 4.0 Additional CSS class(es) to add to the modal.
classes string '' 4.0 Alias for class option.
id string false 4.0 Custom ID attribute for the modal element.
animationTimeout number 600 4.0 Duration of show/hide animations in milliseconds (e.g., 600 = 0.6 seconds). Set to 0 to disable animations.
backgroundColor string 'black' 4.0 Background color of the modal overlay (behind the modal). Accepts 'black' or 'white' values.
replaceOtherAlerts boolean false 4.0 Close other open alerts when showing this one.
autofocus string/boolean false 4.0 CSS selector string to focus specific element when modal opens (e.g., 'input[type="text"]', '#myButton'), or true to focus the modal itself. Set to false to disable autofocus.
image string false 4.0 URL or relative path of image to display in modal.
imageWidth string/number 'auto' 4.0 Width of image content. String values like 'auto', '100%', '500px' or number values like 500 (treated as pixels).
picture string false 4.0 Alias for image option.
color string false 4.0 Alias for theme option.
width string/number false 4.0 Alias for size option.
video string false 4.0 Video URL string. Supports MP4, WebM, OGV files, and YouTube/Vimeo URLs (auto-detected).
video object false 6.0 Video configuration object containing src (required), controls, autoplay, muted, loop, maxWidth, maxHeight, and embedType properties.
video.src string required 6.0 Video URL (MP4, WebM, OGV, YouTube, Vimeo, etc.).
video.embedType string auto-detected 6.0 Video type: 'html5' for MP4/WebM/OGV or 'iframe' for YouTube/Vimeo. Auto-detected if not specified.
video.controls boolean true 6.0 Show video controls (play, pause, volume, etc.).
video.autoplay boolean false 6.0 Auto-play video when modal opens (requires muted for most browsers).
video.muted boolean false 6.0 Start video muted (required for autoplay in most browsers).
video.loop boolean false 6.0 Loop video playback.
video.maxWidth string '800px' 6.0 Maximum video width. Videos use responsive containers that maintain aspect ratio.
video.maxHeight string '450px' 6.0 Maximum video height. Videos use responsive containers that maintain aspect ratio.
iframe string false 4.0 URL string to load in iframe element. The iframe will fill the modal content area.
iframeHeight string false 4.0 Height of iframe as CSS value string (e.g., '400px', '50vh', '100%'). If not specified, iframe uses default height.
ajax string false 4.0 URL string to load content via AJAX request. The response HTML will be inserted into the modal content area.
slideshow array false 5.0 Array containing slide data. In v5.0: array of image URL strings ['img1.jpg', 'img2.jpg']. In v6.0+: array of slide objects [{src: 'img1.jpg', caption: 'Caption 1'}, {src: 'video.mp4', type: 'video'}].
slideshow[].src string required 6.0 Image or Video URL
slideshow[].caption string optional 6.0 Caption text displayed below the image.
slideshow[].type string 'image' 6.0 Slide type: 'image' or 'video'.
slideshow[].controls boolean true 6.0 Show video controls (play, pause, volume, etc.) for video slides.
slideshow[].autoplay boolean false 6.0 Auto-play video when modal opens (requires muted for most browsers) for video slides.
slideshow[].muted boolean false 6.0 Start video muted (required for autoplay in most browsers) for video slides.
slideshow[].loop boolean false 6.0 Loop video playback for video slides.
slideshow[].preload string 'metadata' 6.0 Preload behavior for video slides: 'none', 'metadata', or 'auto'.
slideshow[].maxWidth string '800px' 6.0 Maximum video width for video slides. Videos use responsive containers that maintain aspect ratio.
slideshow[].maxHeight string '450px' 6.0 Maximum video height for video slides. Videos use responsive containers that maintain aspect ratio.
slideshowOptions object {} 6.0 Configuration options for slideshow behavior and navigation.
slideshowOptions.showArrows boolean true 6.0 Show/hide navigation arrows (prev/next).
slideshowOptions.showCounter string false 6.0 Show counter: 'dots', 'numbers', or false.
slideshowOptions.showThumbnails boolean false 6.0 Show thumbnail navigation strip. Note: Thumbnails are displayed as squares at 80×80px (desktop), 70×70px (tablet), or 60×60px (mobile). Use square images at the largest size they will be rendered for optimal quality. When a thumbnail isn't provided, the image will be used as a thumbnail. If a thumbnail isn't provided for a video, it uses a play icon. If a thumbnail fails to load, it displays an exclamation icon.
slideshowOptions.thumbnailLocation string 'bottom' 6.0 Thumbnail position: 'top' or 'bottom'.
slideshowOptions.autoAdvance boolean false 6.0 Enable automatic slide advancement.
slideshowOptions.autoAdvanceInterval number 3000 6.0 Auto-advance interval in milliseconds.
slideshowOptions.keyboardNav boolean true 6.0 Enable keyboard navigation (arrow keys).
slideshowOptions.pauseOnHover boolean false 6.0 Pause auto-advance on mouse hover.
slideshowOptions.loop boolean true 6.0 Loop slideshow when reaching the end.
slideshowOptions.imageSize string 'contain' 6.0 Image sizing mode: 'contain' or 'cover'.
slideshowOptions.preload boolean true 6.0 Preload images for faster navigation.
slideshowOptions.arrowButtons DOM elements null 6.0 Custom arrow buttons DOM elements to replace default navigation arrows.
onOpen function function 4.0 Callback function executed when modal opens. Receives modal jQuery instance as parameter: function(modal) { ... }
onClose function function 4.0 Callback function executed when modal closes. Receives modal jQuery instance as parameter: function(modal) { ... }
onAjaxFail function function 4.0 Callback function executed when AJAX request fails. Receives modal jQuery instance and error object as parameters: function(modal, error) { ... }
onResize function function 5.0 Callback function executed when modal is resized (manual or automatic). Receives modal jQuery instance, width (number), and height (number) as parameters: function(modal, width, height) { ... }
onConfirm function function 4.0 Callback function for confirm button in confirmation dialogs. Receives click event and button element as parameters: function(event, button) { ... }
onDeny function function 4.0 Callback function for deny button in confirmation dialogs. Receives click event and button element as parameters: function(event, button) { ... }
slideshowOptions.onSlideChange function null 6.0 Callback triggered when slide changes. Receives modal instance and current slide number (1-based).
slideshowOptions.onSlideshowEnd function null 6.0 Callback triggered when slideshow ends (no loop mode). Receives modal instance and final slide number (1-based).
slideshowOptions.onSlideshowLoop function null 6.0 Callback triggered when slideshow loops from last to first slide (or vice versa). Receives modal instance and direction ('first' or 'last').
slideshowOptions.onBeforeSlideChange function null 6.0 Callback triggered before slide change. Receives modal instance, from slide (1-based), and to slide (1-based). Return false to prevent slide change.
slideshowOptions.onContentLoad function null 6.0 Callback triggered when slide content loads. Receives modal instance, slide number (0-based), and slide element.
buttons object/array false 4.0 Custom buttons configuration. Single button object: {text: 'OK', theme: 'green', onClick: function() {...}} or array of button objects: [{text: 'Save'}, {text: 'Cancel'}]
buttons.text string required 4.0 Button text content.
buttons.theme string 'default' 4.0 Button theme: default, green, red, blue, etc. View all button themes.
buttons.onClick function null 4.0 Click handler function. Receives event and button element.
buttons.closeAlert boolean true 4.0 Whether button should close the alert when clicked.
buttons.class string '' 4.0 CSS classes for the button. When provided, these classes are used instead of jAlert's default ja_btn styling, giving you complete control over button appearance. If empty, jAlert's default styling and theme classes are applied.
btns object/array false 4.0 Alias for buttons option.
btnBackground boolean true 4.0 Show background behind buttons.
closeBtn boolean true 4.0 Show the close button (X) in the modal.
closeBtnAlt boolean false 4.0 Use alternative close button style.
closeBtnRound boolean true 4.0 Use round close button style.
closeBtnRoundWhite boolean false 4.0 Use white round close button style.
confirmBtnText string 'Yes' 4.0 Text for the confirm button in confirmation dialogs.
denyBtnText string 'No' 4.0 Text for the deny button in confirmation dialogs.
confirmAutofocus string '.confirmBtn' 4.0 CSS selector for element to focus in confirmation dialogs.
autoClose number false 4.6 Automatically close modal after specified milliseconds.

Methods

Instance Methods
// Create modal instance
var modal = $.jAlert({
  title: 'My Modal',
  content: 'Content here'
});

// Get/set option values
modal.set('title', 'New Title');
var currentTitle = modal.get('title');

// Control methods
modal.showAlert();                     // Show the modal
modal.closeAlert();                    // Close the modal
modal.animateAlert('show');            // Animate show/hide

// Resize methods
modal.autoResize();                    // Auto-resize to fit content
modal.resizeToFit();                   // Alias for autoResize()
modal.resizeModal(width, height);      // Manual resize with specific dimensions

// Slideshow methods (new in v6.0)
modal.switchSlide(3);                  // Switch to slide 3 (1-based indexing)
Global Methods
// Global resize methods (new in v5.0.4)
$.autoResize();                        // Auto-resize current modal
$.resizeToFit();                       // Alias for autoResize()
$.resizeModal(height);                 // Resize current modal height

// Global slideshow methods (new in v6.0)
$.switchSlide(2);                      // Switch current modal to slide 2

// Create new modal
$.jAlert({
  title: 'New Modal',
  content: 'Content here'
});
Utility Methods
// Get current alert instance
var currentAlert = $.jAlert('current');

// Attach data-attribute alerts to click events
$.jAlert('attach');

// Add alert to element click
$('#myButton').alertOnClick({
    title: 'Clicked!',
    content: 'Button was clicked'
});

// Add alert to selector globally
$.alertOnClick('.alert-button', {
    title: 'Global Alert',
    content: 'Any .alert-button clicked'
});

// Close alert manually
$('.jAlert').closeAlert();
// or with callbacks
$('.jAlert').closeAlert(true, function() {
    console.log('Alert closed');
});
Auto-Resize Examples
// Modal with manual resizing on content changes
$.jAlert({
  title: 'Dynamic Content',
  content: 'Initial content',
  onOpen: function(modal) {
    // Content will need manual resize when changed
    setTimeout(() => {
      modal.find('.ja_content').html('Much longer content that requires more space...');
      // Manually resize the modal
      modal.autoResize();
    }, 2000);
  }
});

// Manual resize after content change
var modal = $.jAlert({
  title: 'Manual Resize',
  content: 'Content'
});

// Later, resize manually
modal.resizeModal(600, 400);          // Set specific dimensions
modal.autoResize();                    // Or auto-fit to content

// Example with onResize callback
$.jAlert({
  title: 'Resize Tracking',
  content: 'This modal tracks all resize events',
  onResize: function(modal, width, height) {
    console.log('Modal resized - Width:', width, 'Height:', height);
    // Update UI or perform other actions when resized
  },
  onOpen: function(modal) {
    // Simulate content changes that require manual resize
    setTimeout(() => {
      modal.find('.ja_content').append('

Additional content added!'); // Manually trigger resize modal.autoResize(); }, 2000); } });

Shortcut Functions

Required File: These shortcut functions require the optional jAlert-functions.js file to be included in addition to the main jAlert files. See the Quick Functions section in Getting Started below.
Basic Alerts
alert('Message');
alert('Title', 'Message');

successAlert('Success message');
errorAlert('Error message');
infoAlert('Info message');
warningAlert('Warning message');
Advanced Features
// Confirmation dialog
confirm(function() {
  // on confirm
}, function() {
  // on cancel
});

// Slideshow
slideshowAlert([
  'image1.jpg',
  'image2.jpg',
  'image3.jpg'
], {
  autoAdvance: true,
  interval: 3000
});

Events

Basic Events
$.jAlert({
  title: 'Basic Events Demo',
  content: 'Check console for events',
  
  onOpen: function(modal) {
    console.log('Modal opened');
    // Access modal element and instance
  },
  
  onClose: function(modal) {
    console.log('Modal closed');
    // Cleanup operations
  },
  
  onResize: function(modal, width, height) {
    console.log('Modal resized to:', width, 'x', height);
    // Handle resize events (manual or automatic)
  }
});
Confirmation Events
$.jAlert({
  type: 'confirm',
  confirmQuestion: 'Delete this item?',
  
  onConfirm: function(event, button) {
    console.log('User confirmed');
    // Handle confirmation action
    // this.closeAlert(); // Close manually if needed
  },
  
  onDeny: function(event, button) {
    console.log('User denied');
    // Handle denial action
  }
});
AJAX Events
$.jAlert({
  ajax: 'api/data',
  
  onAjaxFail: function(alert, error) {
    console.log('AJAX request failed', error);
    // Handle AJAX loading errors
  },
  
  onOpen: function(alert) {
    console.log('AJAX content loaded successfully');
    // Handle successful AJAX response
    // This callback runs after AJAX content loads
  }
});
Slideshow Events (v6.0+)
$.jAlert({
  slideshow: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
  slideshowOptions: {
    autoAdvance: true,
    loop: false,
    
    onSlideChange: function(modal, slideNumber) {
      console.log('Slide changed to:', slideNumber);
      // Track slide views, update URL, etc.
    },
    
    onSlideshowEnd: function(modal, slideNumber) {
      console.log('Slideshow ended on slide:', slideNumber);
      // Auto-close, show related content, etc.
    },
    
    onSlideshowLoop: function(modal, slideNumber) {
      console.log('Slideshow looped to slide:', slideNumber);
      // Track loop events, show loop indicator, etc.
    },
    
    onBeforeSlideChange: function(modal, fromSlide, toSlide) {
      console.log('About to change from slide', fromSlide, 'to slide', toSlide);
      // Validate slide change, show loading, etc.
      // Return false to prevent slide change
      if (toSlide === 3 && !userHasAccess) {
        alert('Access denied to slide 3');
        return false;
      }
      return true;
    },
    
    onContentLoad: function(modal, mediaType, slideElement) {
      console.log('Content loaded - Type:', mediaType);
      // Hide loading indicators, track media loads, etc.
      if (mediaType === 'image') {
        // Handle image load completion
      } else if (mediaType === 'video') {
        // Handle video load completion
      }
    }
  }
});

Examples & Use Cases

See jAlert in action

Simple Alert
$.jAlert({
  title: 'Hello!',
  content: 'Welcome to jAlert!',
  theme: 'blue'
});
Success Alert
successAlert('Operation completed successfully!');
Requires: jAlert-functions.js - See Quick Functions section.
Error Alert
errorAlert('Something went wrong!');
Requires: jAlert-functions.js - See Quick Functions section.
Warning Alert
warningAlert('Please review your input.');
Requires: jAlert-functions.js - See Quick Functions section.
Complete Theme List: View all 14 available themes with interactive previews and descriptions.
Green Theme
$.jAlert({
  title: 'Success!',
  content: 'Green theme example',
  theme: 'green'
});
Orange Theme
$.jAlert({
  title: 'Warning!',
  content: 'Orange theme example',
  theme: 'orange'
});
Dark Blue Theme
$.jAlert({
  title: 'Info',
  content: 'Dark blue theme example',
  theme: 'dark_blue'
});
Dark Orange Theme
$.jAlert({
  title: 'Alert!',
  content: 'Dark orange theme example',
  theme: 'dark_orange'
});
Complete Size Options: View all available sizes with interactive previews and descriptions.
Small Size
$.jAlert({
  title: 'Small',
  content: 'This is a small modal',
  size: 'sm'
});
Large Size
$.jAlert({
  title: 'Large',
  content: 'This is a large modal with more space',
  size: 'lg'
});
Full Screen
$.jAlert({
  title: 'Full Screen',
  content: 'This modal takes up the full screen',
  size: 'full'
});
Auto Size
$.jAlert({
  title: 'Auto Size',
  content: 'This modal automatically sizes to content',
  size: 'auto'
});
Complete Button Options: For all available button configuration options including themes, callbacks, and properties, see the btns options in the Options table above. View all button themes.
Single Custom Button
$.jAlert({
  title: 'Single Button',
  content: 'This alert has one custom button',
  btns: {
    text: 'Got It!',
    theme: 'green',
    onClick: function() {
      alert('Button clicked!');
    }
  }
});
Multiple Buttons
$.jAlert({
  title: 'Multiple Buttons',
  content: 'Choose an action:',
  btns: [
    {text: 'Save', theme: 'green'},
    {text: 'Cancel', theme: 'red'},
    {text: 'Help', theme: 'blue'}
  ]
});
Confirmation Dialog
$.jAlert({
  type: 'confirm',
  confirmQuestion: 'Are you sure you want to delete this item?',
  confirmBtnText: 'Delete',
  denyBtnText: 'Keep',
  onConfirm: function() {
    alert('Item deleted!');
  },
  onDeny: function() {
    alert('Item kept safe.');
  }
});
Buttons with Custom Classes
When class is provided, jAlert uses only your custom classes instead of its default ja_btn styling, giving you complete control over button appearance.
$.jAlert({
  title: 'Bootstrap Styled Buttons',
  content: 'Buttons with Bootstrap CSS classes',
  btns: [
    {
      text: 'Large Outline',
      class: 'btn btn-outline-primary btn-lg'
      // No theme needed - custom classes override
    },
    {
      text: 'Small Outline',
      class: 'btn btn-outline-success btn-sm'
    },
    {
      text: 'Rounded Pill',
      class: 'btn btn-outline-warning rounded-pill'
    }
  ]
});
Buttons with Callbacks
$.jAlert({
  title: 'Action Buttons',
  content: 'Each button has a different action',
  btns: [
    {
      text: 'Show Alert',
      theme: 'green',
      onClick: function() {
        alert('Another alert!');
      }
    },
    {
      text: 'Log Info',
      theme: 'secondary',
      onClick: function(e, btn) {
        console.log('Info button clicked', btn);
      }
    }
  ]
});
Non-Closing Buttons
$.jAlert({
  title: 'Persistent Modal',
  content: 'Some buttons don\'t close the modal',
  btns: [
    {
      text: 'Stay Open',
      theme: 'blue',
      closeAlert: false,
      onClick: function() {
        alert('Modal stays open!');
      }
    },
    {
      text: 'Close Modal',
      theme: 'red',
      closeAlert: true
    }
  ]
});
Image Modal
$.jAlert({
  image: 'https://picsum.photos/600/400?random=1'
});
YouTube Video
$.jAlert({
  video: 'https://www.youtube.com/embed/dQw4w9WgXcQ'
});
iFrame Content
$.jAlert({
  iframe: 'https://example.com',
  size: 'lg'
});
HTML5 Video
$.jAlert({
  video: {
    src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WhatCarCanYouGetForAGrand.mp4',
    controls: true
  }
});
Basic Slideshow
$.jAlert({
  slideshow: [
    'https://picsum.photos/600/400?random=1',
    'https://picsum.photos/600/400?random=2',
    'https://picsum.photos/600/400?random=3'
  ]
});
Slideshow with Captions
$.jAlert({
  slideshow: [
    {src: 'https://picsum.photos/600/400?random=4', caption: 'First image'},
    {src: 'https://picsum.photos/600/400?random=5', caption: 'Second image'}
  ]
});
Auto-Advance Slideshow
$.jAlert({
  slideshow: [
    'https://picsum.photos/600/400?random=6',
    'https://picsum.photos/600/400?random=7'
  ],
  slideshowOptions: {
    autoAdvance: true,
    interval: 2000
  }
});
Mixed Media Slideshow
$.jAlert({
  slideshow: [
    'https://picsum.photos/600/400?random=8',
    {src: 'https://www.youtube.com/embed/dQw4w9WgXcQ', type: 'video'},
    'https://picsum.photos/600/400?random=9'
  ]
});
Slideshow with Thumbnails
$.jAlert({
  slideshow: [
    {src: 'https://picsum.photos/800/600?random=201', thumbnail: 'https://picsum.photos/150/100?random=301', caption: 'Beautiful landscape'},
    {src: 'https://picsum.photos/600/800?random=202', thumbnail: 'https://picsum.photos/150/100?random=302', caption: 'Portrait orientation'},
    {src: 'https://picsum.photos/900/500?random=203', thumbnail: 'https://picsum.photos/150/100?random=303', caption: 'Wide panoramic view'}
  ],
  slideshowOptions: {
    showThumbnails: true,
    showArrows: true,
    showCounter: 'numbers'
  }
});
Cover Mode - Large Size
$.jAlert({
  slideshow: [
    {src: 'https://picsum.photos/400/300?random=401', caption: 'Small image (400x300) - cropped to fill'},
    {src: 'https://picsum.photos/1200/800?random=402', caption: 'Large image (1200x800) - cropped to fit'},
    {src: 'https://picsum.photos/300/600?random=403', caption: 'Tall image (300x600) - cropped to fill'}
  ],
  size: 'lg',
  slideshowOptions: {
    imageSize: 'cover',
    showArrows: true,
    showCounter: 'dots'
  }
});
Confirmation Dialog
$.jAlert({
  type: 'confirm',
  title: 'Delete Item',
  content: 'Are you sure you want to delete this item?',
  onConfirm: function() {
    console.log('Confirmed!');
  },
  onDeny: function() {
    console.log('Denied!');
  }
});
Custom Animation
$.jAlert({
  title: 'Animated',
  content: 'This modal has custom animations',
  showAnimation: 'bounceIn',
  hideAnimation: 'bounceOut'
});
80+ Animations Available: View all available animations with interactive previews and descriptions.
AJAX Content
$.jAlert({
  ajax: 'https://httpbin.org/html',
  size: 'lg'
});
Event Callbacks
$.jAlert({
  title: 'Events',
  content: 'Check console for events',
  onOpen: function() {
    console.log('Modal opened');
  },
  onClose: function() {
    console.log('Modal closed');
  }
});

License

MIT License

Copyright (c) 2019 HTMLGuy, LLC

Free for Commercial Use

Use in any project, including commercial applications

Modify & Distribute

Modify the code and distribute your changes

No Attribution Required

Use without requiring credit or attribution

Warranty Disclaimer

Software provided "as is" without warranties

Changelog

Version history and updates

Version 6.0.0 - 2025-07-03

🚀 Major Release - Complete Feature Overhaul

✨ New Features
  • 🎠 Complete Slideshow System: Revolutionary slideshow functionality with advanced features
  • 🎥 Enhanced Video Support: Comprehensive HTML5 video and iframe handling
  • 🖼️ Improved Media Handling: Enhanced image and iframe support
  • 📱 Mobile Support: Touch-friendly controls and responsive layouts
🔧 Technical Improvements
  • Performance optimizations for slideshow rendering and video loading
  • Comprehensive memory management and event cleanup
  • Enhanced error handling and validation
  • Improved accessibility with ARIA attributes
🐛 Bug Fixes
  • Fixed responsive video extreme aspect ratio issues
  • Proper cleanup of slideshow timers and event handlers
  • Theme validation now returns 'default' instead of false
  • Media modals now default to 'auto' size for better UX