# @internetarchive/modal-manager

> A Modal Manager Web Component

Latest version **2.0.6** (published 2026-04-29) · AGPL-3.0-only license · 0 weekly downloads

## Install

```sh
npm install @internetarchive/modal-manager
pnpm add @internetarchive/modal-manager
yarn add @internetarchive/modal-manager
bun add @internetarchive/modal-manager
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.0.6 |
| Published | 2026-04-29 |
| First published | 2020-06-22 |
| Weekly downloads | 0 |
| License | AGPL-3.0-only |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 2.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Maintainers | bfalling, mitraardron, vbanos, kngenie, iisa, cdrini, nsharma123, dualcnhq, latonv, ibnesayeed, tracey.pooh, jim-at-ia, jeffwklein, rebecca-shoptaw, jbuckner, dhallia |

## Links

- npm: https://www.npmjs.com/package/@internetarchive/modal-manager
- Repository: https://github.com/internetarchive/iaux-modal-manager
- Homepage: https://github.com/internetarchive/iaux-modal-manager#readme
- Issues: https://github.com/internetarchive/iaux-modal-manager/issues
- npm.io page: https://npm.io/package/@internetarchive/modal-manager

## Dependencies (5)

- [lit](https://npm.io/package/lit.md) ^2.8.0 || ^3.3.2
- [throttle-debounce](https://npm.io/package/throttle-debounce.md) ^5.0.2
- [@internetarchive/icon-user](https://npm.io/package/@internetarchive/icon-user.md) ^1.4.0
- [@internetarchive/icon-close](https://npm.io/package/@internetarchive/icon-close.md) ^1.4.0
- [@internetarchive/ia-activity-indicator](https://npm.io/package/@internetarchive/ia-activity-indicator.md) ^0.0.6 || ^1.0.0

## Recent versions

- 2.0.6 (latest) — 2026-04-29
- 2.0.5-webdev-8155.9 (alpha) — 2026-02-19
- 0.2.8-alpha01 (canary) — 2023-03-16
- 0.1.0-lit1 (lit1) — 2021-11-15
- 2.0.5 — 2026-02-19
- 2.0.5-webdev-8155.8 — 2026-02-09
- 2.0.5-webdev-8155.6 — 2026-02-04
- 2.0.5-webdev-8155.4 — 2026-02-04
- 2.0.5-webdev-8155.3 — 2026-02-04
- 2.0.5-webdev-8155.2 — 2026-02-04
- 2.0.5-webdev-8155.1 — 2026-02-04
- 2.0.4 — 2025-12-03
- 2.0.4-alpha-webdev7960.1 — 2025-11-28
- 2.0.4-alpha-webdev7960.0 — 2025-11-27
- 2.0.3 — 2025-10-21
- … 69 more at https://npm.io/package/@internetarchive/modal-manager/versions

## README

![Build Status](https://github.com/internetarchive/iaux-modal-manager/actions/workflows/ci.yml/badge.svg) [![codecov](https://codecov.io/gh/internetarchive/iaux-modal-manager/branch/master/graph/badge.svg)](https://codecov.io/gh/internetarchive/iaux-modal-manager)

# Modal Manager Component

A modal manager built on LitElement with support for custom content and light DOM elements.

![Modal Manager](./assets/modal-screenshot.jpg "Modal Manager Demo")

## Installation
```bash
npm install --save @internetarchive/modal-manager
```

## Usage
```html
<!-- index.html -->
<script type="module">
  import '@internetarchive/modal-manager';
  import { ModalConfig } from '@internetarchive/modal-manager';
</script>

<style>
  /* add the following styles to ensure proper modal visibility */
  body.modal-manager-open {
    overflow: hidden;
  }

  modal-manager {
    display: none;
  }

  modal-manager[mode='open'] {
    display: block;
  }
</style>

<modal-manager></modal-manager>

<script>
  // show a simple modal
  const manager = document.querySelector('modal-manager');
  const config = new ModalConfig();
  config.headline = 'Hi, Everybody!';
  config.message = 'Hi, Doctor Nick!';
  manager.showModal(config)

  // to hide the modal call `closeModal()`:
  manager.closeModal();
</script>
```

## Advanced Usage

### Markup Content

You can pass in custom HTML into the `ModalConfig`:

```html
<script type="module">
  import { html } from 'lit-html';
</script>

<modal-manager></modal-manager>

<script>
  const manager = document.querySelector('modal-manager');
  const config = new ModalConfig();
  config.title = 'Internet Archive';
  config.subtitle = '';
  config.headline = 'Thanks for your Support!';
  config.message = html`
    <p>Thanks for your donation!</p>
    <p>Please click <a href="">here</a> to complete!</p>
  `;
  config.headerColor = '#36A483';
  manager.showModal(config);
</script>
```

### Custom Content

Display completely custom content in the modal body, including light DOM content like a PayPal button.

```html
<modal-manager></modal-manager>

<script>
  const manager = document.querySelector('modal-manager');
  const config = new ModalConfig();
  const customContent = html`
    Can contain any markup, including web components. Event listeners also work. Try clicking on the picture.
    <div style="text-align: center">
      <div class="sr-only">Visible for screen-readers only</div>
      <a href="https://fillmurray.com" style="display: block">Fill Murray</a>
      <img src="100x100.jpg" @click=${showBillAlert} />
    </div>
  `;

  // customContent used to render as slotted content, it can also use .sr-only class
  modalManager.showModal(config, customContent);
</script>
```

### Config Options

All of the config options:

```javascript
const config = new ModalConfig();
config.title = 'Internet Archive';
config.subtitle = '';
config.headline = '<div class="sr-only">Visible for screen-readers only</div>Thanks for your Support!';
config.message = 'Thank you for supporting the Internet Archive!';
config.headerColor = '#36A483';
config.showProcessingIndicator = false;
config.processingImageMode = 'processing'; // or `complete`
```

# Development

## Prerequisite
```bash
npm install
```

## Start Development Server
```bash
npm start
```

## Testing
```bash
npm test
```

## Linting
```bash
npm lint
```

---
_Source: https://npm.io/package/@internetarchive/modal-manager · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._