LayerPro

What is LayerPro?

LayerPro replaces the boring browser alert(), confirm(), and prompt() with beautiful, customizable modals that work everywhere.

No more ugly popup boxes. No more blocking the main thread. Just clean, modern modals that your users will love.

Features

• Zero runtime dependencies: no jQuery — pure vanilla DOM helpers; React/react-dom are external and only used to render the modal body
• Multiple modal types: alert, confirm, prompt, message
• Fully customizable: appearance, behavior, and content
• Dockable windows (taskbar style): click a dock icon to restore, focus, or minimize — just like an OS taskbar
• Draggable & Resizable: instant, with no transition lag while resizing
• Maximize is pure CSS: uses position: fixed + insets, so it follows the viewport with no JS resize listeners
• Fade in/out transitions for open/close
• TypeScript support: full type definitions

Installation

npm install layerpro

Or use directly in HTML:

<script src="https://cdn.jsdelivr.net/npm/layerpro"></script>

Quick Start

Import LayerPro once in your app entry point:

import "layerpro";

That's it. Now you have alert(), confirm(), prompt(), and message() globally.

Usage

Basic Modals

alert("Hello World!");

confirm("Are you sure?", () => {
  console.debug("User clicked YES");
});

prompt("What's your name?", (name) => {
  console.debug("User entered:", name);
});

message("Operation complete!");

Custom Popups

layerpro.popup.open({
  id: 'myModal',
  name: 'My Modal',
  body: '<p>Your content here</p>',
  width: 450,
  height: 350,
  buttons: {
    confirm: { text: "OK", cb: () => {} },
    cancel: { text: "Cancel", cb: () => {} }
  }
});

React Components

In a React environment, you can pass React components directly:

layerpro.popup.open({
  id: 'reactModal',
  name: 'React Modal',
  body: <MyComponent />,   // React element
  width: 500,
  height: 400
});

The body Parameter

The body property accepts different content types:

| Type | Example | |------|---------| | Plain text | body: "Hello" | | HTML string | body: "<p>Hello</p>" | | React element | body: <Component /> |

Note: In React, always use elements (<Component />), not function calls (Component()).

Options

{
  id: string,           // Unique ID
  body: any,            // Content (text, HTML, or React)
  name: string,         // Modal title
  icon: string,         // Icon (HTML entity)

  // Dimensions
  width: number,
  height: number,
  minWidth: number,
  minHeight: number,
  maxWidth: number,
  maxHeight: number,

  // Position
  top: number | string,
  left: number | string,
  right: number | string,
  bottom: number | string,

  // Animation
  fadeIn: number,
  fadeOut: number,
  timer: number,

  // Features
  movable: boolean,
  resizable: boolean,
  maximize: boolean,
  iconize: boolean,
  dockable: boolean,
  close: boolean,
  raised: boolean,

  // Buttons
  buttons: {
    confirm?: { text: string; cb?: () => void },
    cancel?: { text: string; cb?: () => void }
  }
}

Methods

| Method | Description | |--------|-------------| | layerpro.popup.open(props) | Open a modal | | layerpro.popup.close(id) | Close a modal | | layerpro.popup.center(id) | Center modal | | layerpro.popup.maximize(id) | Maximize modal | | layerpro.popup.iconize(id) | Minimize to dock | | layerpro.popup.movable(id) | Enable drag | | layerpro.popup.resizable(id) | Enable resize |

Browser Support

Chrome 80+ • Firefox 75+ • Safari 13+ • Edge 80+

Contributing

LayerPro is open source and free for everyone. The current source is private, but anyone is welcome to join. If you'd like to contribute, propose changes, or just talk about the project, get in touch:

• Dario Passariello — https://dario.passariello.ca/ — [email protected]

Participation is voluntary and free — everyone is free to take part.

License

MIT License

Credits

Copyrigth (c) Dario Passariello