PopupKit

PopupKit is an NPM package that you can call from one line of JavaScript code to display a nice-looking popup modal.

Install

NPM

npm i popupkit

Yarn

yarn add popupkit

After installation, paste this into your html file's <head> tag

<script src='./node_modules/popupkit/index.min.js'></script>

or...

CDN

If you just want to use a CDN, paste this into your html file's <head> tag

<script src='https://unpkg.com/popupkit@1.3.5/index.min.js'></script>

Usage

All you need is one line of JavaScript code. Yep! You heard me right. One line is all you need.

popupkit.theme(title, message, callback());

The requirements for a popup include:

  1. Starting with the popupkit object
  2. Calling a theme function (list of themes)
  3. Writing a the title in the 1st parameter
  4. Writing a the message in the 2nd parameter
  5. (optional 3rd parameter) Writing a callback function for when the popup is closed

Try this example out:

popupkit.blackAndWhite("Hey!", "Wassup?", () => {
  console.log("You closed it")
});

When you click , a popup will appear. All you need to do is write that line and the modal will show. You can add it inside an event listener, function, or basically anything in JavaScript.

Themes

Click on one of the themes to see a sample!

Theme Function Description
simpleLight() A simple light-themed popup
simpleDark() A simple dark-themed popup
blackAndWhite() A black and white popup
blueAndWhite() A blue and white popup
redAndWhite() A red and white popup
yellowAndWhite() A yellow and white popup
greenAndWhite() A green and white popup

More to come 😉

License

This project is licensed under the MIT License - see the MIT License file for details.