An Unstyled jQuery Plugin for Modal Windows | modality

Modality is an unstyled, simple, lightweight, and extremely versatile jQuery AND JavaScript plugin for modal windows.

jquery modal popup example, open modal popup using jquery on button click, jquery modal popup free download, modal popup in html


  • Free
  • Easy to Use
  • No Default Styling
  • Accessible
  • Two Versions (JS & jQuery)
  • Mobile Friendly
  • CSS3 Animations
  • Easily Customizable
  • Extendable Framework
  • Multiple Instances
  • Lightweight (3kb)
  • Browser Friendly
    • jQuery: IE 6+
    • JavaScript: IE 8+


These animations use CSS 3 and will not work for IE7-9.

  1. "scale-up""scale-down"
  2. "slide-left""slide-right"
  3. "slide-up""slide-down"
  4. "sticky-top""sticky-bottom"
  5. "horizontal-flip""vertical-flip"
  6. "spin-up""spin-down"
  7. "fall-left""fall-right"
  8. "swing-down""swing-up"
  9. "swing-left""swing-right"
  10. "front-flip""back-flip"

Feature-rich Messaging Windows for Alerts, Dialogs, Lightboxes Library | jQuery.madWindow

How to make use of it:

1. Load the required modality.css in the document header section.

<link href="css/modality.css" rel="stylesheet">

2. Create a modal popup.

<div id="yourModalId" class="yourModalClass" style="display:none;">
  <p>Modal Content</p>
  <a href="#yourModalId">Close Modal</a> 

3. The popup style is modal, however.

.yourModalClass {
  background-color: #e95546;
  border: 1px solid #fc6d58;
  padding: 0 1.5em 1em;
  border-radius: 5px;
  max-width: 380px;

4. Enable modal popup using jQuery.

<script src="//"></script>
<script src="js/modality.jquery.min.js"></script> 

5. Or using pure JavaScript.

<script src="js/modality.min.js"></script>
var modal1 = Modality.init('#yourModalId', {

6. All options are default.

// automatically bind triggers to modal
bind: true, 

// user can add a class to container
class: '', 

// click anywhere off of modal to close it
clickoff: true, 

// animation style
// "scale-up", "scale-down" 
// "slide-left", "slide-right" 
// "slide-up", "slide-down" 
// "sticky-top", "sticky-bottom" 
// "horizontal-flip", "vertical-flip" 
// "spin-up", "spin-down" 
// "fall-left", "fall-right" 
// "swing-down", "swing-up" 
// "swing-left", "swing-right" 
// "front-flip", "back-flip"
effect: "", 

// set false to disable modal
enabled: true, 

// close modal with 'esc' key
keyboard: true, 

// open on page load
open: false, 

// inner wrapper
inner: 'mm-wrap',

// when modal is visible
visible: 'mm-show',

// outer-most container
outer: 'modality-modal',

// function to run when modal closes
onClose: "", 

// function to run when modal opens
onOpen: ""

Advanced Usage


addTrigger( )html elementinstanceadd an element to toggle the modal
close( )function*instancecloses the modal
disable( )noneinstancedisables all triggers for the modal
enable( )noneinstanceenables all triggers for the modal
isOpen( )nonebooleantells you if the modal is open or not
open( )function*instanceopens the modal
removeTrigger( )html elementinstanceremove an element from toggling the modal
toggle( )function*instanceopens the modal if closed and vice versa
*Optional callback function.   


idstringthe modal’s ID
modalhtml elementyou’re modal <div id="yourModalId">
settingsjsonthe modal’s current settings
triggersarrayall the modal’s triggers and their respective event handle
triggeredhtml elementthe most recent trigger used to open or close the modal
wrapperhtml elementthe modal’s outer-most container <div class="modality-outer">

Lightweight Responsive jQuery Modal Popup, modality Plugin/Github

See Demo And Download

Official Website(marksmccann): Click Here

This superior jQuery/javascript plugin is developed by marksmccann. For extra advanced usage, please go to the official website.

Related Posts


Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…


HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Leave a Reply

Your email address will not be published. Required fields are marked *