Advanced jQuery Modal, Lightbox & Slideshow Plugin - jAlert

File Size: 1.37 MB
Views Total: 15113
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Advanced jQuery Modal, Lightbox & Slideshow Plugin - jAlert

jAlert is a simple yet feature-rich jQuery plugin used to create fully configurable modals, dialogs, popups, lightboxes, alerts, slideshows (gallery lightboxes) with cool CSS3 animations.

Key Features:

  • 12 Built-in Themes - Professional styling with light and dark variants
  • Rich Media Support - Images, videos, iframes, and AJAX content
  • Advanced Slideshows - Multi-image galleries with navigation controls
  • Mobile Responsive - Touch gestures and adaptive sizing
  • Keyboard Navigation - Full accessibility with ESC and arrow keys
  • Flexible Configuration - Extensive options for customization
  • Backward Compatible - Seamless upgrades from older versions
  • Performance Optimized - Lightweight with no unnecessary dependencies

How to use it:

1. Download the plugin and load the required stylesheet jAlert.css in the head section of the document.

<link href="dist/jAlert.min.css" rel="stylesheet">

2. Load the latest jQuery library and jAlert's at the end of the document.

<!-- Required -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="dist/jAlert.min.js"></script>

<!-- Shortcut Functions (see below) -->
<script src="dist/jAlert-functions.min.js"></script>

3. Basic usage.

// Simple alert
$.jAlert({
  title: 'Info Alert',
  content: 'An Info Alert',
});

// Image lightbox
$.jAlert({
  image: 'path/to/image.jpg',
  title: 'My Image'
});

// Gallery Lightbox
$.jAlert({
  slideshow: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
  slideshowOptions: {
    autoAdvance: true,
    showArrows: true,
    showCounter: 'dots'
  }
});

// The following shortcuts require jAlert-functions.min.js
// default alert popup 
alert('Hello World!');

// success
successAlert('Success', 'Hello World!');

// error
errorAlert('Error', 'Hello World!');

// info
infoAlert('Info', 'Hello World!'); 

// warning
warningAlert('Warning', 'Hello World!'); 

// black warning
blackAlert('Warning', 'Hello World!');

// confirm dialog
confirm(function(e,btn){ //event + button clicked
  e.preventDefault();
  successAlert('Confirmed!');
}, function(e,btn){
  e.preventDefault();
  errorAlert('Denied!');
});

4. Full plugin options and callbacks with default values.

  • title (Default: false): The string for the modal's title. If false, the title bar is not displayed.
  • content (Default: false): The HTML string to show in the modal body. Ignored if using image, iframe, ajax, or video.
  • noPadContent (Default: true): A boolean that removes the default padding from the content area. Useful for full-width iframes or images.
  • fullscreen (Default: false): A boolean that makes the modal take up the full browser window.
  • image (Default: false): A URL string to display an image in a lightbox.
  • imageWidth (Default: 'auto'): A string to define the image width (e.g., '50%', '200px').
  • ajax (Default: false): A URL string to fetch content via a GET request.
  • onAjaxFail (Default: function): A callback function that executes if the AJAX request fails.
  • iframe (Default: false): A URL string to embed content in an iframe.
  • iframeHeight (Default: false): A string (px or %) to control the iframe height. Defaults to 90% of the viewport height.
  • class (Default: false): A string of one or more custom CSS classes to add to the modal container.
  • id (Default: false): A string to set the ID for the modal container.
  • showAnimation (Default: 'fadeInUp'): The entrance animation. Uses Animate.css classes.
  • hideAnimation (Default: 'fadeOutDown'): The exit animation. Uses Animate.css classes.
  • animationTimeout (Default: 500): An integer representing the animation duration in milliseconds.
  • theme (Default: 'default'): A string that sets the color scheme: 'default', 'red', 'dark_red', 'green',' dark_green', 'blue', 'dark_blue', 'brown', 'gray', 'dark_gray', 'black'.
  • backgroundColor (Default: 'black'): A string ('black' or 'white') for the page overlay color.
  • blurBackground (Default: false): A boolean that blurs the page content behind the modal.
  • size (Default: 'auto'): A string for the modal's width. Options: 'xsm', 'sm', 'md', 'lg', 'xlg', 'full', 'auto', or a custom object like {'width': '500px'}.
  • replaceOtherAlerts (Default: false): A boolean that, if true, closes other open modals before showing the new one.
  • closeOnClick (Default: false): A boolean that, if true, closes the modal when the background overlay is clicked.
  • closeOnEsc (Default: true): A boolean that, if true, closes the modal when the Escape key is pressed.
  • closeBtn (Default: true): A boolean that controls the visibility of the top-right close button.
  • closeBtnRound (Default: true): A boolean that makes the close button round. false uses the old square style.
  • closeBtnAlt (Default: false): A boolean to enable an alternate style for the close button.
  • btns (Default: false): An object or array of objects to define buttons. Each button object can have text, href, theme, class, closeAlert, and onClick properties.
  • btnBackground (Default: true): A boolean that shows or hides the gray background behind the buttons.
  • autofocus (Default: false): A string with a DOM selector for an element to focus on when the modal opens.
  • onOpen (Default: function): A callback function that runs after the modal has opened and content is loaded.
  • onClose (Default: function): A callback function that runs after the modal has closed.
  • type (Default: 'modal'): A string that can be set to 'confirm' to create a pre-configured confirmation dialog.
  • confirmQuestion (Default: 'Are you sure?'): The question to display for a type: 'confirm' modal.
  • confirmBtnText (Default: 'Yes'): The text for the confirmation button.
  • denyBtnText (Default: 'No'): The text for the denial button.
  • confirmAutofocus (Default: '.confirmBtn'): The selector for which button to autofocus in a confirmation dialog.
  • onConfirm (Default: function): The callback function for when the confirmation button is clicked.
  • onDeny (Default: function): The callback function for when the denial button is clicked.
$.jAlert({
  'title': false,
  'content': false,
  'noPadContent': true,
  'fullscreen': false,
  'image': false,
  'imageWidth': 'auto',
  'video': false,
  'ajax': false,
  'onAjaxFail': function(alert, errorThrown) {
    alert.jAlert().closeAlert();
    if (typeof errorAlert === 'function') {
        errorAlert(errorThrown);
    }
  },
  'iframe': false,
  'iframeHeight': false,
  'slideshow': false,
  'slideshowOptions': {
    'autoAdvance': false,
    'autoAdvanceInterval': 3000,
    'keyboardNav': true,
    'pauseOnHover': false,
    'resizeMode': 'fitCurrent', // 'fitCurrent' or 'fitLargest'
    'loop': true,
    'showArrows': true,
    'showCounter': 'numbers', // 'numbers', 'dots', or false
    'arrowButtons': null // Custom arrow buttons DOM elements
  },
  'class': '',
  'classes': '',
  'id': false,
  'showAnimation': 'fadeInUp',
  'hideAnimation': 'fadeOutDown',
  'animationTimeout': 600,
  'theme': 'default',
  'backgroundColor': 'black',
  'blurBackground': false,
  'size': 'auto,
  'replaceOtherAlerts': false,
  'closeOnClick': false,
  'closeOnEsc': true,
  'closeBtn': true,
  'closeBtnAlt': false,
  'closeBtnRound': true,
  'closeBtnRoundWhite': false,
  'btns': false,
  'autoClose': false,
  'btnBackground': true,
  'autofocus': false,
  'onOpen': function(alert) {
    return false;
  },
  'onClose': function(alert) {
    return false;
  },
  'type': 'modal',
  'confirmQuestion': 'Are you sure?',
  'confirmBtnText': 'Yes',
  'denyBtnText': 'No',
  'confirmAutofocus': '.confirmBtn',
  'onConfirm': function(e, btn) {
    e.preventDefault();
    console.log('confirmed');
    return false;
  },
  'onDeny': function(e, btn) {
    e.preventDefault();
    return false;
  }
});

5. Slideshow (gallery lightbox) options.

  • autoAdvance (Default: false): A boolean that, if true, automatically advances to the next slide.
  • autoAdvanceInterval (Default: 3000): A number setting the time in milliseconds between slide transitions.
  • keyboardNav (Default: true): A boolean to enable left/right arrow key navigation.
  • pauseOnHover (Default: false): A boolean that, if true, pauses auto-advance on mouse hover.
  • imageSize (Default: 'container'): Or 'cover'.
  • loop (Default: true): A boolean that, if true, loops the slideshow back to the beginning.
  • showArrows (Default: true): A boolean that controls the visibility of navigation arrows.
  • showCounter (Default: 'numbers'): A string to set the counter style. Options are 'numbers' (e.g., 1/3), 'dots', or false.
  • arrowButtons (Default: null): Custom DOM elements to use as navigation arrows.
  • showThumbnails (Default: true): Shows thumbnail navigation.
  • thumbnailLocation (Default: 'bottom'): Or 'top'.
$.jAlert({
  'slideshowOptions': {
    'autoAdvance': false,
    'autoAdvanceInterval': 3000,
    'keyboardNav': true,
    'pauseOnHover': false,
    'imageSize': 'container',
    'loop': true,
    'showArrows': true,
    'showCounter': 'numbers', // 'numbers', 'dots', or false
    'arrowButtons': null // Custom arrow buttons DOM elements
    'showThumbnails': true,
    'thumbnailLocation': 'bottom',
  },
});

6. Enhanced HTML5/Youtube/Vimeo video support.

$.jAlert({
  video: {
    src: 'video.mp4',
    embedType: 'html5', // or 'iframe' for Youtube/Vimeo videos
    controls: true, 
    autoplay: true,
    muted: true, 
    loop: true,
  }
});

7. API methods.

// Instance Methods
const myInstance = $.jAlert({
  // ...
});
myInstance.showAlert();  
myInstance.closeAlert();
myInstance.animateAlert('show');
myInstance.autoResize();
myInstance.resizeToFit(); 
myInstance.resizeModal(width, height); 
myInstance.switchSlide(3);

// Global methods
$.autoResize();  
$.resizeToFit();
$.resizeModal(height); 
$.switchSlide(2);

Changelog:

v6.0.0 (2025-07-04)

  • Complete Slideshow System
  • Enhanced Video Support
  • And more improvement

v5.0.5 (2025-06-28)

  • Bug Fixes & Stability Improvements
  • CSS & UI Refinements
  • Added Dynamic Resize Functionality
  • Enhanced Mobile/Tablet Support

v5.0.3 (2025-06-27)

  • Added ARIA attributes for better screen reader support
  • Implemented semantic HTML with proper roles and labels
  • Enhanced keyboard navigation with focus management
  • Added descriptive labels for all interactive elements
  • Added swipe gestures for slideshow navigation
  • Improved touch-friendly controls for mobile devices
  • Enhanced responsive design for better mobile experience
  • Maintained backward compatibility with existing API
  • Perfect Close Button Centering: Fixed the "x" alignment in round close buttons using flexbox and precise vertical transforms
  • Smart Title Bar Positioning: Close buttons now properly align within title bars for consistent visual hierarchy
  • Button Type Optimization: Different close button styles (round, alt) now have specific positioning for optimal appearance
  • Clean Slideshow Dots: Removed borders from slideshow navigation dots to prevent squashing and ensure perfect circular appearance
  • Enhanced Markup: Close button "x" is now wrapped in a styled span for better control
  • Improved CSS Organization: Better specificity and organization for button positioning
  • Build Output Cleanup: CSS now outputs as jAlert.min.css instead of jAlert.css.min.css

v5.0.0 (2025-06-27)

  • jAlert has been completely rewritten with modern development practices while maintaining full API compatibility. This release brings significant improvements in performance, browser support, and features.

2020-09-10

  • Fix toggleFocusTrap() call locations

v4.9.1 (2019-07-26)

  • Cleanup some CSS stuff, improve iframe full height, improve image fullscreen

v4.8.0 & v4.7.0 (2019-07-10)

  • Added confirm question as the third param of the confirm() method
  • Accepts dom element for content (it'll grab the html automatically)
  • Button onClick method now receives 3 params e, btn, alert (so you can quickly alert.closeAlert())
  • When you open an image alert using the image param, it will now shrink the popup to fit the image size if it's smaller and disables alert padding

v4.6.5 (2018-08-23)

  • fix inability to scroll

2018-08-13

  • Bugfix

2016-08-26

  • add fullscreen: true/false + tiny adjustment to red alternative close button padding

2016-08-25

  • fix dupe button callbacks, add dist folder, autocompile hook instructions, bump version to 4.5

2016-07-20

  • added box-shadow back to improve look of white background

2016-05-12

  • fix for height

2016-05-11

  • v4

2016-05-07

  • added dark colors and adjusted each shade

2016-05-06

  • adjust round close button

2016-05-04

  • added new round button as option, remove borders

2015-11-03

  • Fixed or IE8

2015-09-13

  • fixed alert variable overriding function.

2015-09-11

  • fixed alert variable overriding function.

2015-09-10

  • fix for alert.each

2015-09-04

  • enhancement: remove focus from the element that initiated the alert
  • options were being overriden by each new alert

2015-09-01

  • Compatibility of Date.now() for IE8 and 7, opacity of backgrounds in IE8 and 7

2015-07-15

  • fix for ie10 iframe

2015-07-13

  • Changed default animation to fade.

2015-07-09

  • .off fix

2015-07-03

  • Fixed on scrolling tall alert, background wasn't position: fixed

2015-06-29

  • Fixed body overflow hidden bug

 


This awesome jQuery plugin is developed by HTMLGuyLLC. For more Advanced Usages, please check the demo page or visit the official website.