1.0.2 • Published 8 years ago
simplemodal v1.0.2
Simple Modal
A Javascript plugin to save rewriting modal popup code over and over.
Core functionality
This plugin should:
- Build a modal element and add it to the page
- Add any classes specified in the
classNameoption to the modal - If the
closeButtonoption is true, add a close button - If the
contentoption is a HTML string, set it as the modal’s content - If the
contentoption is a domNode, set it’s interior content as the modal’s content - Set the modal’s
maxWidthandminWidthrespectively - Add an overlay if the
overlayoption is true - When opened, add a
modal-openclass that we can use with our CSS to define an open state. - When closed, remove the
modal-openclass. - If the modal’s height exceeds the viewport’s height, also add a
modal-anchoredclass so that we can handle that scenario
Road map
- Add the ability to close modal with
ESCkey - Add library of animations that can be added to the popup
- Be able to customize close button
Usage
var Modal = require('simplemodal');
var myModal = new Modal({
// Can be a string or reference an ID
content: myContent,
// Defaults
className: 'fade-and-drop',
closeButton: true,
maxWidth: 600,
minWidth: 280,
overlay: true
});Settings
| Option | Type | Default | Description |
|---|---|---|---|
| className | string | 'fade-and-drop' | Adds animation class |
| closeButton | boolean | true | Turns close button on/off |
| maxWidth | int | 600 | Sets max width of modal |
| minWidth | int | 280 | Sets min width of modal |
| overlay | boolean | true | Turns overlay on/off |