Demos Usage GitHub npm

Fast & Lightweight Popup Library

Flexible JavaScript/TypeScript popup manager with support for stacked modal layers ("window-in-window"), autofocus, custom callbacks, and accessibility.

npm install smp-popup

Interactive Demos

1. Basic Popup

Opens a standard modal popup with auto-focus input capabilities.

2. Nested Popup ("Window-in-Window")

Demonstrates opening a second popup (Window 2) directly over Window 1 without breaking layer order.

3. Alert / Confirm Modal

Displays an alert or confirmation dialog with action buttons.

Event Callbacks Output:
Waiting for actions...

Popup Window 1

This is the first modal popup. Try typing into the input below or launch Window 2 on top of this one.

Popup Window 2 (Stacked)

This popup is rendered over Window 1! Closing this window will return focus to Window 1 or close cleanly.

Alert Confirmation

Are you sure you want to perform this action?

Quick Start Code

import SmpPopup from 'smp-popup';
import 'smp-popup/dist/style.css';

// Initialize SmpPopup instance
const popup = new SmpPopup({
  closeAddClass: 'icon_close g_reset_btn',
  callbackOpenOnce: wrapperNode => console.log('Opened:', wrapperNode),
  callbackCloseAlways: wrapperNode => console.log('Closed:', wrapperNode),
});

// Show popup by DOM element ID
popup.show('popup_1');