Press "Enter" to skip to content

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.

Be First to Comment

    Leave a Reply

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