Solar-popup

Ultralight, ultra fast, ultra smooth Vanilla TypeScript popup. Framework independent but can be used with any framework.

12Kb minified

installation

You can install into your application by running npm i solar-popup

You can then use it like so:

import SolarPopup from "solar-popup"
 
function showSimplePopup() {
  var child = document.createElement("DIV")
  child.innerHTML = `<p>This is some content that can be supplied to the popup</p>
           <p>Also press the [ESC] key to close]</p>
           <button type="submit">Clicking a submit button will also close it</button>
        `
  var popup = new SolarPopup(child)
  popup.show()
}
 
showSimplePopup()

You can also import the default styles solar-popup.css which will style it for you.

Why

I made this popup because I had a requirement for a slide-in and slide-out popup with smooth CSS transitions, including a fade-in and fade-out modal background. I also wanted hooks for once the popup had left the screen and being able to inject arbitrary html inside it.

Features

• It will close on ESC press key, clicking on the close x button anchor or submit events from children
• Adds a modal background that fades in/our with CSS3 transitions
• Popup itself slides in/out with CSS3 transitions

Demo

Live Demo

Video demo

Feel free to watch the video explanation of how it works here:

Testing

npm i
npm test