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: