Dependency-free, lightweight and responsive modal window library
Install Modly.js as a NPM dependency or grab the latest version from the CDN.
NPM:
# yarn
yarn add modly-js --dev
# npm
npm i modly-js --save-dev
CDN:
<script src="https://cdn.jsdelivr.net/npm/modly-js"></script>
A new Modly will pop up as soon as you instanciate it:
new Modly()
The above is the most basic version that is allowed (without any options).
The constructor also supports passing an options object:
new Modly({ content: "Hi there from modly!" });
animation.enabled
- (true, false) Defines, if the Modly should be shown with or without an animation.
animation.duration
- (duration in ms) Defines the duration of the animation (only relevant, if animation.enabled
is set to true).
className
- (string) Additional custom class name(s) which will be added to the Modly wrapper.
closeButton.enabled
- (true, false) Defines if the close button should be shown or hidden.
content
- (string, HTMLElement) If a string will be passed, that's going to be the content, otherwise you can i.e. use document.querySelector()
to grab the HTML element you want to set as content.
overlay.enabled
- (true, false) Defines, if the wrapping overlay should be enabled (background color and will dispose the Modly instance on click) or disabled (no background color and won't dispose the Modly instance on click).
position
- (top-left, top, top-right, right, bottom-right, bottom, bottom-left, left, center) Defines where to position the Modly. If the content of the Modly is bigger than the current screen size, it'll be positioned vertically to the top.
sizes.width
- (number in px) Sets the maximum width of the Modly.
theme
- (light) Defines the theme for the Modly. Currently, only light
is implemented.
For each of the options above, there's a pre-defined default value, which will be used, if not overridden in the options:
const defaults = {
animation: {
enabled: true,
duration: 300
},
className: "",
closeButton: {
enabled: true
},
content: "",
overlay: {
enabled: true
},
position: "center",
sizes: {
width: 900
},
theme: "light"
};