1.0.2 • Published 1 year ago
super-simple-popup v1.0.2
super-simple-popup
An extremely simple zero dependency browser popup/modal library!
Usage
super-simple-popup is intended to be used as an ESM module. It can be used through a CDN of your choice or via npm. You'll need to load in your own css, but an example file has also been provided. Don't worry, it's really easy to style.
Arguments
| Argument | Description | Default |
|---|---|---|
| title | Title of the modal, shown in the top bar | undefined |
| content | Content of the modal, HTML is not supported by default | Placeholder |
| plainText | Should innerText by used instead of innerHTML (safer)? | true |
| clickBackdropToClose | Should the user be able to click the back overlay to close the modal? | true |
| closeKeys | Array of key names or codes that should close the modal | ['Escape'] |
| onClose | Callback function to run when the modal closes | undefined |
| callbackReplaceDefault | Should the onClose callback replace default closing behavior? | false |
Methods
| Method | Description | Arguments |
|---|---|---|
| .close() | Closes and removes the modal | None |
Styling
You can load in the default styles, or create your own. There will be no styles by default.
Default Styles
You can load the default styles using a cdn. For example, you could add the following tag to your html page's head:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/super-simple-popup@latest/index.css">Custom Styles
Only a few classes are used, which is good news for you! Here they are:
| Class | Description |
|---|---|
| .popup-backdrop | Back overlay of the popup modal |
| .popup-container | Main container of the popup |
| .popup-close | Close button |
| .popup-title | Popup title text (not the header) |
| .popup-header | Popup header container (title + close button) |
| .popup-content | Main content container |
Example
import Popup from 'super-simple-popup'
new Popup({
title: 'Example',
plainText: false,
content: "<strong>HTML Content</strong>"
})Using the default styles, the example might look like the following: