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

12Kb minified

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.

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.

• 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

Live Demo

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

npm i npm test