# LemonadeJS Modal
[Official website and documentation is here](https://lemonadejs.com/plugins/modal)
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.
## Features
- 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;
## Getting Started
You can install using NPM or using directly from a CDN.
### npm Installation
To install it in your project using npm, run the following command:
```bash
$ npm install @lemonadejs/modal
```
### CDN
To use modal via a CDN, include the following script tags in your HTML file:
```html
```
### Usage
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!
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...
);
}
```
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...
```
### Configuration
You can configure things such as position, size, and functionalities.
### Settings
| 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. `Default: false`. |
| 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`. |
### Events
| 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.1.1
- Added new events: `onmove` and `onresize`.
### 3.1.0
- Close modal using the keyboard by pressing `Shift + Tab` on the icon.
## Other Tools
- [jSuites](https://jsuites.net/docs)
- [Jspreadsheet Data Grid](https://jspreadsheet.com)