Feature-rich Modal Popup Plugin - jQuery Showcase

Feature-rich Modal Popup Plugin - jQuery Showcase
File Size: 22.5 KB
Views Total: 1141
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Showcase is a responsive, powerful jQuery modal popup plugin to showcase any content (e.g. images, videos, text, ajax content) in an elegant way.

More features:

  • Keyboard navigation.
  • Light & dark themes.
  • Auto scales images and videos while maintaining the aspet ratio.
  • Fade in and Fade out animations.
  • Loading indicator.
  • Responsive design based on CSS flexbox.
  • Useful Callbacks, Methods & Events.
  • Also can be used to create custom alert/confirm/prompt dialogs.

Basic usage:

1. To get started, load jQuery library and the Showcase plugin in your html document.

<!-- Light theme -->
<link href="css/jquery.showcase.light.css" rel="stylesheet">
<!-- Dark theme -->
<link href="css/jquery.showcase.light.css" rel="stylesheet">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
<!-- Main JavaScript -->
<script src="jquery.showcase.js"></script>

2. Call the function on any jQuery object to create a modal window.

$('element').showcase(options, callback);

3. All possible options to customize the modal window.


  // width/height
  width: 'auto',
  height: 'auto',

  // current index
  currentIndex: 0,

  // html string or jQuery object to place in the info box
  infoContent: null,

  // auto scales images and videos while maintaining the apset ratio.
  scaleMedia: true,

  // force scaling
  forceScaling: false,

  // animate in elements
  animate: true,

  // enable fade in and fade out animations
  fade: true,

  // If data and events should be copied from the element to the Showcase clone
  cloneData: false,

  // the amount of seconds before the Showcase closes automatically (0 to disable)
  expire: 0,

  // image RegExp used to check for image content
  imageRegExp: /\.bmp|\.gif|\.jpe|\.jpeg|\.jpg|\.png|\.svg|\.tif|\.tiff|\.wbmp$/,

  // the video RegExp used to check for video content in links
  videoRegExp: /\.mp4|\.ogg|\.webm$/,

  // text for controls
  controlText: {
    close: 'Close',
    navLeft: 'Navigate Left',
    navRight: 'Navigate Right',

  // the Promise to fulfill before loading the content
  promise: null

}, function(){
   // do something

4. If you want to create custom alert/confirm/prompt dialogs to replace the native JavaScript popup boxes:

// alert popup
Showcase.alert(message, button, callback)

// alert popup
Showcase.confirm(message, buttons, callback)

// alert popup
Showcase.prompt(message, button, input, callback)

5. API methods.

// checks if the Showcase is busy loading content.

// gets the current Showcase error

// gets the Showcase container

// gets the current Showcase content 

// enables the Showcase

// disables the Showcase

// resizes the Showcase content
Showcase.resize(width, height, animate, callback)

// navigate to the next or previous Showcase element.

6. Available event handlers.

  • enable
  • disable
  • resize
  • navigate
Showcase.on(event, data, handler)
Showcase.off(event, handler)

Change log:


  • Added expire option to close the Showcase automatically.
  • Changed result from popup to null if Showcase was closed.


  • Fixed small viewport with auto height and removed empty symbol element


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