{"id":11555,"library":"picomodal","title":"PicoModal","description":"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.","status":"abandoned","version":"3.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/Nycto/PicoModal","tags":["javascript"],"install":[{"cmd":"npm install picomodal","lang":"bash","label":"npm"},{"cmd":"yarn add picomodal","lang":"bash","label":"yarn"},{"cmd":"pnpm add picomodal","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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`.","wrong":"const picoModal = require('picomodal');","symbol":"picoModal","correct":"import picoModal from 'picomodal';"},{"note":"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.","wrong":"import picoModal from 'picomodal'; // Will be undefined if only loaded via script tag without module system","symbol":"picoModal (Global)","correct":"<!-- Via script tag -->\n<script src=\"path/to/picomodal.min.js\"></script>\n<script>\npicoModal('Hello');\n</script>"},{"note":"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.","wrong":"picoModal.close(); // You must call methods on an *instance* of the modal","symbol":"Modal Instance Methods","correct":"const modalInstance = picoModal('Content').afterClose(() => console.log('Closed'));"}],"quickstart":{"code":"import picoModal from 'picomodal';\n\nconst myModalContent = `\n  <p>This is a custom PicoModal example.</p>\n  <p>It's styled with an interesting overlay color and custom button text.</p>\n  <button id=\"closeCustomModal\">Got it!</button>\n`;\n\nconst modal = picoModal({\n  content: myModalContent,\n  overlayStyles: {\n    backgroundColor: '#333',\n    opacity: 0.85\n  },\n  modalStyles: {\n    border: '2px solid #007bff',\n    padding: '20px',\n    borderRadius: '8px'\n  },\n  closeButton: false, // We'll use our custom button\n  overlayClose: true // Allow closing by clicking outside\n}).afterCreate(function(modalInstance) {\n  // Attach event listener to our custom close button after the modal DOM is created\n  const closeButton = modalInstance.modalElem().querySelector('#closeCustomModal');\n  if (closeButton) {\n    closeButton.addEventListener('click', () => modalInstance.close());\n  }\n}).afterClose(() => {\n  console.log('Custom modal has been closed!');\n});\n\n// To demonstrate, let's show the modal after a short delay\nsetTimeout(() => {\n  modal.show();\n}, 1000);\n\n// You would typically trigger this from a user action, e.g.:\n// document.getElementById('openModalButton').addEventListener('click', () => modal.show());","lang":"javascript","description":"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."},"warnings":[{"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.","message":"PicoModal 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.","severity":"breaking","affected_versions":">=3.0.0"},{"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.","message":"The 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.","severity":"deprecated","affected_versions":">=3.0.0"},{"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.","message":"PicoModal 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.","severity":"gotcha","affected_versions":"<=3.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"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).","error":"ReferenceError: picoModal is not defined"},{"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.","cause":"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.","error":"Modal does not appear when calling .show()"},{"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.","cause":"The `overlayClose` or `escCloses` options might be explicitly set to `false`, or a custom event handler is preventing default behavior without calling `modal.close()`.","error":"Modal does not close when clicking outside or pressing Escape key"}],"ecosystem":"npm"}