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.
"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"
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
| Name | Parameters | Returns | Description |
|---|---|---|---|
| addTrigger( ) | html element | instance | add an element to toggle the modal |
| close( ) | function* | instance | closes the modal |
| disable( ) | none | instance | disables all triggers for the modal |
| enable( ) | none | instance | enables all triggers for the modal |
| isOpen( ) | none | boolean | tells you if the modal is open or not |
| open( ) | function* | instance | opens the modal |
| removeTrigger( ) | html element | instance | remove an element from toggling the modal |
| toggle( ) | function* | instance | opens the modal if closed and vice versa |
| *Optional callback function. |
Attributes
| Name | type | Description |
|---|---|---|
| id | string | the modal’s ID |
| modal | html element | you’re modal <div id="yourModalId"> |
| settings | json | the modal’s current settings |
| triggers | array | all the modal’s triggers and their respective event handle |
| triggered | html element | the most recent trigger used to open or close the modal |
| wrapper | html element | the 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.
