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

Features

  • 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+

Effects

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;">
  <h2>Title</h2>
  <p>Modal Content</p>
  <a href="#yourModalId">Close Modal</a> 
</div>

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;
  color:#fff;
}

4. Enable modal popup using jQuery.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/modality.jquery.min.js"></script> 
<script>
$('#yourModalId').modality({
// OPTIONS
});
</script> 

5. Or using pure JavaScript.

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

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

Methods

NameParametersReturnsDescription
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.   

Attributes

NametypeDescription
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

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

vue-fullpage-modal

First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…