Multifunction Customizable Modal Plugin For jQuery - ssi-modal

Multifunction Customizable Modal Plugin For jQuery - ssi-modal
File Size: 125 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

ssi-modal is a simple yet robust jQuery plugin which helps you create highly customizable modal / dialog / notification / gallery popup boxes with one JS call.

Key features:

  • Easy to implement.
  • Can be used as notification messages.
  • Cool animations on modal open / close.
  • Custom positions and sizes.
  • Stackable modal windows.
  • Custom action buttons. Good for confirmation dialog boxes.
  • Image and gallery lightbox supported.

How to use it:

1. All you have to do is to include jQuery library together with the jQuery ssi-modal plugin's files on the html page and we're ready to go.

<link href="ssi-modal.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="ssi-modal.min.js"></script>

2. Create a basic modal window with custom content.{
  content: 'Hello World!'

3. Create a confirm dialog with custom buttons.

  content: 'Are you sure?',
  okBtn: {
   },function (result) {
          // success
          // error

4. Create a notification message.

ssi_modal.notify('success', {
  content: 'Success'

5. Create a single image lightbox.

<a href="1.jpg" class="ssi-imgBox">Image Lightbox</a> 
<a href="1.jpg" class="ssi-imgBox">
  <img src="1.jpg">

6. Create a gallery lightbox from a group of different medias.

<a data-ssi_imgGroup="group-1" href="1.jpg" class="ssi-imgBox">
  <img src="1.jpg"/>
<a data-ssi_imgGroup="group-1" href="2.jpg" class="ssi-imgBox">
  <img src="1.jpg"/>
<a data-ssi_imgGroup="group-1" href="3.jpg" class="ssi-imgBox">
  <img src="1.jpg"/>
  title: true,
  animation: true,
  center: true,
  iframe: {className: 'idd'}
}, 'group-1');

7. All default options.

// The main content of the modal.
content: '',

// Enables/disables the scroll bar of the document when the modal is opened.
bodyScroll: false,

// Forces the modal to remove or not the content when it close.It not associated with stack modals
keepContent: false,

// Sets the position of the modals.
// 'right top'|'right bottom'|'left top'|'left bottom'|'center top'|'center bottom'
position: '',

// Enables disables the back drop. The shared option defines that the modal will open a back drop only if there is not anyone already in the dom.
// The byKindShared is similar to the shared but the already rendered backdrop must belong to the same kind of modals (normal modal,stack modal,imgBox modal) else will open new.
// boolean|'shared'|'byKindShared'
backdrop: true,

// Make the modal a part of stack.For example toast/notification messages. Requires position.
stack: false,

// Enables/Disables the ability to close the modal when you click in the main window.
onClickClose: false,

bodyElement: false,

// Defines a class to the modal outer element.
className: '',

// Defines a class to the backdrop element.
backdropClassName: '',

// Set the options and the state of a modal according to the preview
preview: {
    icon: false, // Generate an icon that allows the user to change display state
    hideIcons: false, // Enables/disables the ability to hide the modal after a certain time when the modal is in fullScreen state.
    state: 'normal' // full

// { time: 4, displayTime:false, resetOnHover:true }
closeAfter: false, 

// Close the modal when you click outside.
outSideClose: true,

// Callback when the modal closes.
onClose: '',

// Callback when the modal opens.
onShow: '',

// Callback when the modal closes.
beforeClose: '',

// Callback when the modal opens.
beforeShow: '',

// Options for iframe.
iframe: {
  allowFullScreen: true,
  className: ''

// Element centering.Not associated with positioned modals
center: false,
closeIcon: true,

// Enables/disables the navigation of imgBox.
navigation: false,

// Defines the size of the modal.
sizeClass: 'medium',

// Enables/disables animations if you set a string all animation type will be set to that sting.
animation: false,

// Set the animations for the modal window.
// {show:'',hide:''}
modalAnimation: undefined,

// Set the animations for modal the back drop.
// {show:'',hide:''}
backdropAnimation: undefined,

animationSpeed: 300,

// The buttons of modal.
// [{className: 'btn btn-danger', enableAfter:3, id: '', label: 'Open', modalReverseAnimation:true backdropReverseAnimation:true 
buttons: [], 

closeAfter:{ clearTimeOut:true, keepContent:true, method: function(){ } } ]

// Register a new icon in the top of the modal( where the x button is).You can modify it only with css using content and background properties.
// [className:'',method:function(){}]
iconButtons: [],

// The title of the modal.
title: '',

// If modal height is bigger than the screen the height of modal will be fixed and will fit the screen also the content will be scrollable.
fixedHeight: false,

// The modal min-height will be the height of screen.
fitScreen: false

8. API methods.

// closes the very top modal

// closes the modal with class myModal

// closes the normal and notify modals but not those with myModal class.

// closes all the modals except those with myModal and mySecondModal classes.

// closes all the modals.

// removes immediately all the modal elements from the DOM. 

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