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)
jAlert-functions.js
for simplified wrapper functions that make common alerts even easier to use.
<!-- 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:
- Upgrade Guide: v4.x → v5.0.0 - No breaking changes (except file location), 100% backwards compatible
- Upgrade Guide: v5.0.5 → v6.0.0 - Major new features with some breaking changes
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
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!');
jAlert-functions.js
- See Quick Functions section.
Error Alert
errorAlert('Something went wrong!');
jAlert-functions.js
- See Quick Functions section.
Warning Alert
warningAlert('Please review your input.');
jAlert-functions.js
- See Quick Functions section.
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'
});
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'
});
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
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'
});
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