1.0.3 • Published 3 years ago
@southmedia/popup v1.0.3
Popup
Lightweight JavaScript popup library
Installation and Usage
Install the library with npm install @southmedia/popup or yarn @southmedia/popup
ES6
import Popup from "@southmedia/popup"Example
new Popup({
popupSelector: "[data-popup-example]",
triggerSelector: "[data-popup-example-trigger]",
offsetElementsSelector: "[data-offset-popup]",
beforeOpen: (event) => {
console.log("before open", event.detail);
const popup = event.detail.popup;
const trigger = event.detail.trigger;
},
afterOpen: (event) => {
console.log("after open", event.detail);
},
beforeClose: (event) => {
console.log("before close", event.detail);
},
afterClose: (event) => {
console.log("after close", event.detail);
}
})Options
| Name | Type | Default | Description |
|---|---|---|---|
| activeClass | string | "opened" | Opened popup active class |
| bodyClass | string | - | Body class then popup opened |
| popupSelector | string | - | Popup selector. Required |
| triggerSelector | string | - | Element selector click on will open popup |
| closeSelector | string | "data-popup-close" | Element selector click on will close popup |
| lockScroll | boolean | true | If enabled: lock scroll on window and add margin by scrollbar width to prevent shaking |
| offsetElementsSelector | string | - | Element selector to add right by scrollbar width. Useless when lockScroll: false. |
| animationDuration | number | 600 | Transition duration (in ms) |
| animationManual | boolean | false | If enabled: animation will need to be set manually |
Events
| Name | Description |
|---|---|
| beforeOpen | Event will be fired right before opened |
| afterOpen | Event will be fired right after opened |
| beforeClose | Event will be fired right before closed |
| afterClose | Event will be fired right after closed |
Events have an argument "event", that contains popup and trigger that fired popup.
event.detail = {
popup: element,
trigger: element
}Maintainers
- achoplyak - Andrey Choplyak