{"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.","language":"javascript","status":"abandoned","last_verified":"Sun Apr 19","install":{"commands":["npm install picomodal"],"cli":null},"imports":["import picoModal from 'picomodal';","<!-- Via script tag -->\n<script src=\"path/to/picomodal.min.js\"></script>\n<script>\npicoModal('Hello');\n</script>","const modalInstance = picoModal('Content').afterClose(() => console.log('Closed'));"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}