MultiModal
A typescript/javascript library which supports multiple modals, is mobile friendly and has fancy animations.
See it in action
Check it out
Modalception
Create as many modals as you want. Useful for confirm modals.
Built with GSAP & JQuery
Ultra high-performance, professional-grade animation for the modern web. Even on mobile.
Easily Themeable
Comes with 2 Themes:
Classic
Modern
Installation
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script> <script src="app-path/multi-modal.min.js"></script> <link href="app-path/multi-modal.css" rel="stylesheet" type="text/css">Usage
var modal = new MultiModal({ // default options closeButton: true // if you are using the modern theme fullScreen should be true // fullScreen: true }); // Add even handlers $(document).click(function(event) { // mandatory event handlers if ($(event.target).hasClass('js-modal-close')) { modal.close(); } if ($(event.target).hasClass('js-modal-close-all')) { modal.closeAll(); } // custom event handlers if ($(event.target).hasClass('js-modal-toggle')) { modal.new({ title: 'Multi Modal', content: 'Do you like it?', buttons: { primary: { value: 'Yes!', href: '', className: 'button button--primary' }, secondary: { value: 'No', className: 'button button--secondary', closeOnClick: true } } }); } }Remote Support
Want to create a modal using a remote file? No problemo, we’ll even animate it for you.
modal.new({ remote: 'modal.html' }); // With data modal.new({ remote: { url: 'modal.html', data: { name: 'John', age: 28 } } });Data properties can be accessed using modal.remote.data.name for instance.
Options
| Parameter | Type | Description |
|---|---|---|
| title | string | The title of the modal |
| content | string | The content of the modal |
| className or classList | string or array | The class of the modal |
| closeButton | boolean or string | Defaults to "mobile". Show a close button. "mobile" will make it only visible for the specified width or smaller of the breakpoint in the .scss config file (default: 767px). There will always be a close button when fullScreen is true. |
| buttons | object | See down below section Button Options |
| fullScreen | boolean | Defaults to false. Determines if the modal will launch in fullscreen mode. Used in the modern theme. |
| allowBackdropClose | boolean | Defaults to true. Will a click on the background close this modal? Set to false when you want to force the user to interact with the buttons. |
| remote | string or object | Pass the url or an object with url and optional data properties. This will override all the other properties, so simply don’t use them if you are using this. |
Button Options
The buttons object consists of two keys: primary (Required) and secondary (Optional). Each have following options:
| Parameter | Type | Description |
|---|---|---|
| value | string | Required. The value of the button |
| href | string | The href of the button |
| className or classList | string or array | The class of the button |
| closeOnClick | boolean | If true clicking on the button will close the modal |
