picomodal

library3.0.0jsnpmunverified

PicoModal is a lightweight, self-contained JavaScript library designed for creating modal dialogs. It boasts a minimal footprint, weighing approximately 2KB when minified and gzipped, and operates without any external JavaScript dependencies, making it highly embeddable in various environments. The library handles focus management, keyboard events (like Esc key closing), and ARIA attributes for accessibility out-of-the-box. Key differentiators include its plain vanilla JS approach, eliminating the need for jQuery or other frameworks, and its self-contained nature, requiring no separate CSS or image files. Despite these features, the package appears to be abandoned, with its latest stable version (3.0.0) published over nine years ago in September 2016. There is no active development or defined release cadence, and users should be aware of its long-term maintenance status.

web-framework

npm install picomodal

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · PICOMODAL

picomodal

web-frameworkjavascriptv3.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

picoModal

✓ import picoModal from 'picomodal';

✗ const picoModal = require('picomodal');

While CommonJS `require` might work in Node.js environments, for browser-based module bundlers or native ESM, `import` is the standard. However, given the library's age, its primary distribution might be UMD/global script, where `picoModal` is directly available on `window`.

picoModal (Global)

✓  <script src="path/to/picomodal.min.js"></script> <script> picoModal('Hello'); </script>

✗ import picoModal from 'picomodal'; // Will be undefined if only loaded via script tag without module system

Historically, PicoModal was often included as a global script, making the `picoModal` function available directly on the `window` object without explicit imports. This is the simplest way for many legacy projects.

Modal Instance Methods

✓ const modalInstance = picoModal('Content').afterClose(() => console.log('Closed'));

✗ picoModal.close(); // You must call methods on an *instance* of the modal

The `picoModal` function returns a modal instance, which then exposes methods like `show()`, `close()`, `modalElem()`, and event handlers like `afterClose()`. These methods are not directly on the main `picoModal` function itself.

This quickstart demonstrates creating a PicoModal with custom content, styling, a custom close button, and event handling. It shows how to obtain a modal instance and interact with its API.

import picoModal from 'picomodal'; const myModalContent = ` <p>This is a custom PicoModal example.</p> <p>It's styled with an interesting overlay color and custom button text.</p> <button id="closeCustomModal">Got it!</button> `; const modal = picoModal({ content: myModalContent, overlayStyles: { backgroundColor: '#333', opacity: 0.85 }, modalStyles: { border: '2px solid #007bff', padding: '20px', borderRadius: '8px' }, closeButton: false, // We'll use our custom button overlayClose: true // Allow closing by clicking outside }).afterCreate(function(modalInstance) { // Attach event listener to our custom close button after the modal DOM is created const closeButton = modalInstance.modalElem().querySelector('#closeCustomModal'); if (closeButton) { closeButton.addEventListener('click', () => modalInstance.close()); } }).afterClose(() => { console.log('Custom modal has been closed!'); }); // To demonstrate, let's show the modal after a short delay setTimeout(() => { modal.show(); }, 1000); // You would typically trigger this from a user action, e.g.: // document.getElementById('openModalButton').addEventListener('click', () => modal.show());

Debug

Known issues

breakingPicoModal version 3.0.0 is a major release, implying potential breaking changes from previous 2.x versions. The project's GitHub releases page or npm changelog does not explicitly detail these changes, requiring manual inspection for migration.

fix

Thoroughly review your existing PicoModal implementation and test all modal functionalities after upgrading to identify and address any behavioral changes. Consult the source code differences between v2.x and v3.x if issues arise.

affects: >=3.0.0

deprecatedThe PicoModal library has not been updated since September 2016, with its latest version 3.0.0 published over nine years ago. This indicates the project is no longer actively maintained, and users should be aware that new features, bug fixes, or security updates are highly unlikely.

fix

For new projects, consider modern, actively maintained modal libraries. For existing projects, be prepared to fork and maintain the library yourself or plan for migration to a more current solution if security or feature needs arise.

affects: >=3.0.0

gotchaPicoModal might not provide native support for modern JavaScript module systems like ES Modules (ESM) without a bundler, given its age. Direct `import` statements may fail in environments expecting pure ESM.

fix

If using a module bundler (Webpack, Rollup, Parcel), it will likely handle CJS/UMD output correctly. If attempting native ESM in browsers or Node.js, ensure the package is transpiled or served in a compatible UMD format, or consider explicitly loading it as a global script for simpler integration.

affects: <=3.0.0

Errors

Common errors & fixes

ReferenceError: picoModal is not defined

The `picoModal` function is not available in the current scope. This typically means the JavaScript file was not loaded, or it was loaded incorrectly (e.g., trying `import` when only a global script tag was used, or vice-versa).

fix

Ensure the `picomodal.min.js` script is correctly included in your HTML before your application script, or if using a module system, verify the import path and syntax (`import picoModal from 'picomodal';` for ESM, or `const picoModal = require('picomodal');` for CJS) is correct and the module is resolving.

Modal does not appear when calling .show()

The modal might not be attached to the DOM, or there could be a CSS conflict preventing its visibility, or the `content` option was empty.

fix

Verify that your `picoModal` call includes valid `content`. Check the browser's developer tools for any errors, and inspect the DOM to see if the modal elements (`.pico-overlay`, `.pico-modal`) are present but hidden. Ensure no global CSS is overriding `display: none` or `visibility: hidden` unexpectedly on these elements.

Modal does not close when clicking outside or pressing Escape key

The `overlayClose` or `escCloses` options might be explicitly set to `false`, or a custom event handler is preventing default behavior without calling `modal.close()`.

fix

Ensure `overlayClose: true` and `escCloses: true` are set in the `picoModal` options if you desire these behaviors. If using custom close logic, ensure `modalInstance.close()` is correctly invoked in your event handlers.

Upgrade

Version history

3.0.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/Nycto/PicoModal ↗

packagehttps://www.npmjs.com/package/picomodal ↗

homepagehttps://picomodal.com ↗