LemonadeJS modal is a JavaScript component to create floating modals.
npm install @lemonadejs/modalOfficial website and documentation is here
Compatible with Vanilla JavaScript, LemonadeJS, React, VueJS or Angular.
The LemonadeJS JavaScript Modal is a responsive and reactive component that creates floating modals. With its flexible settings, users can easily configure draggability, closability, and resizability according to their needs.
- Lightweight: The JavaScript Modal is only about 4 KBytes;
- Reactive: Any changes to the underlying data are automatically applied to the HTML, making it easy to keep your grid up-to-date;
- Integration: It can be used as a standalone library or integrated with any modern framework;
You can install using NPM or using directly from a CDN.
To install it in your project using npm, run the following command:
``bash`
$ npm install @lemonadejs/modal
To use modal via a CDN, include the following script tags in your HTML file:
`html`
Declarative—Quick example with Lemonade
`javascript
import Modal from '@lemonadejs/modal';
import '@lemonadejs/modal/dist/style.css';
export default function App() {
const toggle = () => {
this.modal.closed = !this.modal.closed;
};
return (render) => render<> Quick example!
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...
;`
}
Quick example with React
`jsx
import React, { useRef } from 'react';
import Modal from '@lemonadejs/modal/dist/react';
import '@lemonadejs/modal/dist/style.css';
export default function App() {
const modal = useRef();
const toggle = () => {
modal.current.closed = !modal.current.closed;
};
return (
Quick example!
Quick example with Vue
vue
Quick example!
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...
`Programmatically - Quick example with Javascript
html
Quick example!
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...
`$3
You can configure things such as position, size, and functionalities.
$3
| Attribute | Type | Description |
| ------------ | ------- | -------------------------------------------------------------------------- |
| title? | String | The header title of the modal. If empty, the header will be not displayed. |
| height? | Number | The height of the modal in pixels. |
| width? | Number | The width of the modal in pixels. |
| top? | Number | The vertical position of the modal within its window in pixels. |
| left? | Number | The horizontal position of the modal within its window in pixels. |
| draggable? | Boolean | Determines if the modal can be dragged.
. |
| resizable? | Boolean | Determines if the modal can be resized. Default: false. |
| closed? | Boolean | Controls the open and close state of the modal. Default: false. |
| closable? | Boolean | Disables the ability to close the modal. Default: false. |
| center? | Boolean | Enables rendering the modal in the center of its window. Default: false. |
| url? | String | The URL from which to fetch and render content. |
| auto-close? | Boolean | Close the modal when it loses the focus. Default: false. |
| auto-adjust? | Boolean | Ensures modal will be visible on screen. Default: false. |
| backdrop? | Boolean | Enables the backdrop when the modal is opened. |
| minimizable? | Boolean | Modal can be minimized. Default: false. |
| minimized? | Boolean | Current minimized state of the modal. |
| position? | String | Modal is automatic align during initialization. |
| title? | String | Title of the modal. |
| responsive? | Boolean | Enables responsive mode. Default: true. |
| layers? | Boolean | Bring to front on focus. |
| focus? | Boolean | Focus on the modal when open it. Default: true. |
| overflow? | Boolean | Create scroll when the content is larger than the modal. Default: false. |$3
| Event | Description |
| --------- | ---------------------------------------- |
| onload? | When the modal is ready. |
| onclose? | Called when modal closes. |
| onopen? | Called when modal opens. |
| onresize? | When the user resize the modal. |
| onmove? | When the user change the modal position. |
License
The LemonadeJS Modal is released under the MIT.
Changelog
$3
- Added new events:
onmove and onresize.$3
- Close modal using the keyboard by pressing
Shift + Tab` on the icon.