---
title: "JavaScript Modal | LemonadeJS v5"
description: "LemonadeJS v5 archive. Discover LemonadeJS Modal, a dynamic and responsive JavaScript component for creating floating modals in web applications. It is."
source: https://lemonadejs.com/docs/v5/plugins/modal/
---

![JavaScript Modal](/img/javascript-modal.jpg){.right style="width: initial; margin: 60px;"}

# JavaScript Modal

`JavaScript Components`{.jtag .black .framework-images}

`Package size: 2.79KB gzipped`

## Overview

LemonadeJS Modal is a lightweight, responsive, and reactive JavaScript component designed to create dynamic floating modals. It offers flexible configuration options, allowing extended features such as draggability, closability, and resizability to meet specific user requirements.

## Configurable Features

LemonadeJS Modal offers a range of customizable features, giving developers the flexibility to tailor the modals to their specific needs. Below are some of the key configurable settings:

- **Draggable**: Easy to move across the screen.
- **Resizable**: Adjust modal size with ease.
- **Layered Modals**: Manage multiple modals with layer control.
- **Minimizable**: Option to minimize the modal.
- **Auto-Close**: Automatically closes when clicking outside the modal.
- **Auto-Adjust**: Adjusts position within the visible viewport.
- **Positioning**: Customizable modal placement.
- **Responsive Design**: Adapts to different screen sizes.
- **Reactive Functionality**: Reacts to user interactions and data changes.

Documentation
-------------

### Installation

```bash
npm install @lemonadejs/modal
```

### Settings

| Attribute    | Type    | Description                                                                |
|--------------|---------|----------------------------------------------------------------------------|
| title?       | String  | The header title of the modal. If empty, the header will not be 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`.                 |
| position?    | String  | center, left, right, bottom, absolute. `Default: none`.                    |
| 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 |
|------------------------------| --- |
| onclose? | Called when modal closes. |
| onopen? | Called when modal opens. |

> **Keyboard Events:** The modal can be closed by pressing the 'Escape' key or using other available methods while it is open.
> **Material icons:** It requires material icons.
  

Examples
--------

### Basic Modal Example

This example demonstrates the presentation of a centrally positioned modal and outlines procedures for managing its opening and closing.

```html
<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<div id="root">
    <div style="padding: 10px;">
        <p>Quick example!</p>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</div>
    </div>
</div>
<input type="button" value="Toggle Modal" id="button" />

<script>
const modal = Modal(document.getElementById("root"), {
    width: 400,
    height: 200,
    title: "My window modal",
    closed: true,
    closable: true,
    draggable: true,
    position: 'center',
});
button.addEventListener('click', () => {
    modal.closed = !modal.closed;
});
</script>
</html>
```
```javascript
import lemonade from 'lemonadejs'
import Modal from '@lemonadejs/modal';
import '@lemonadejs/modal/dist/style.css';

export default function App() {

    const self = this;

    const toggle = () => {
        self.modal.closed = !self.modal.closed
    }

    return render => render`<>
        <Modal :ref="self.modal" :width="400" :height="200" title="My window modal" :closed="true"
            :closable="true" :draggable="true" position="center">
            <div style="padding: 10px;">
                <p>Quick example!</p>
                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</div>
            </div>
        </Modal>
        <input type="button" value="Toggle Modal" onclick=${toggle} />        
    </>`
}
```
```jsx
import React, { useRef, useState } from 'react';
import Modal from '@lemonadejs/modal/dist/react';
import '@lemonadejs/modal/dist/style.css';

export default function App() {
  const modalRef = useRef(null);

  const [closed, setClosed] = useState(true);

  const content = `<div>
    <p>Quick example!</p>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        eiusmod tempor...
    </div>
    </div>`;

  return (
    <>
      <Modal
        ref={modalRef}
        width={400}
        height={200}
        title={'My window modal'}
        closed={closed}
        closable={true}
        draggable={true}
        position={'center'}
        content={content}
      />
      <input
        type="button"
        value="Toggle Modal"
        onClick={() => setClosed(!closed)}
      />
    </>
  );
}
```
```vue
<template>
    <Modal ref="modal" :position="center" :width="400" :height="200" title="My window modal"
       :closed="true" :closable="true" :draggable="true" position="center" :content="content" />
</template>
<script>
import Modal from '@lemonadejs/modal/dist/vue';

import '@lemonadejs/modal/dist/style.css'

export default {
    name: 'App',
    components: {
        Modal,
    },
    data() {
        const content = `<div>
            <p>Quick example!</p>
            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</div>
        </div>`

        return {
            width: 400,
            height: 200,
            title: "My window modal",
            closed: true,
            closable: true,
            draggable: true,
            position: 'center',
            content
        };
    }
};
</script>
```

### Minimizable modals

Create multiple minimizable modals via JavaScript. This feature can be util on Chat Application or application that requires multiple windows. 

```html
<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<div id="root"></div>

<input type="button" value="Create Modal" id="createModal" />

<script>
const root = document.getElementById("root");

const create = function(val) {
    let d = document.createElement('div');
    root.appendChild(d);

    Modal(d, {
        draggable: true,
        title: "Modal" + val,
        width: 100,
        height: 100,
        position: 'center',
        closable: true,
        minimizable: true
    });
}

let i = 0;

document.getElementById("createModal").addEventListener("click", () => {
    create(++i);
});
</script>
</html>
```
```javascript
import lemonade from 'lemonadejs';
import Modal from '@lemonadejs/modal';
import '@lemonadejs/modal/dist/style.css';

export default function Component() {

    const self = this;

    self.instances = [];
    self.counter = 0;

    self.createModal = function () {
        const container = document.createElement('div');
        document.body.appendChild(container);

        const index = ++self.counter;

        Modal(container, {
            draggable: true,
            title: 'Modal ' + index,
            width: 300,
            height: 200,
            position: 'center',
            closable: true,
            minimizable: true,
            html: `
                <div style="padding: 10px;">
                    <p>This is Modal ${index}</p>
                </div>
            `
        });

        self.instances.push(container);
    };

    return render => render`
        <div style="padding: 20px;">
            <input type="button" value="Create Modal" onclick="self.createModal" />
        </div>
    `;
}

```
```jsx
import React from "react";
import Modal from "@lemonadejs/modal";
import "@lemonadejs/modal/dist/style.css";

export default function App() {
    const counterRef = React.useRef(0);
    const containersRef = React.useRef([]);

    const createModal = () => {
        const container = document.createElement("div");
        document.body.appendChild(container);

        const index = ++counterRef.current;

        Modal(container, {
            draggable: true,
            title: "Modal " + index,
            width: 300,
            height: 200,
            position: "center",
            closable: true,
            minimizable: true,
            html: `
                <div style="padding: 10px;">
                    <p>This is Modal ${index}</p>
                </div>
            `
        });

        containersRef.current.push(container);
    };

    return (
        <div style={{ padding: "20px" }}>
            <input type="button" value="Create Modal" onClick={createModal} />
        </div>
    );
}

```
```vue
<template>
    <div style="padding: 20px;">
    <input type="button" @click="createModal" value="Create Modal" />
    </div>
</template>

<script>
import Modal from '@lemonadejs/modal';
import '@lemonadejs/modal/dist/style.css';

export default {
name: 'App',
data() {
  return {
    counter: 0,
    instances: []
  };
},
methods: {
  createModal() {
    const container = document.createElement('div');
    document.body.appendChild(container);

    const index = ++this.counter;

    Modal(container, {
      draggable: true,
      title: 'Modal ' + index,
      width: 300,
      height: 200,
      position: 'center',
      closable: true,
      minimizable: true,
      html: `
        <div style="padding: 10px;">
          <p>This is Modal ${index}</p>
        </div>
      `
    });

    this.instances.push(container);
  }
}
};
</script>
```

## Advanced Example

### Reactive Properties

Open the modal to adjust the configuration. This allows you to create a comprehensive, reusable, and highly valuable plugin that is framework-agnostic.

```html
<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<div id="root"></div>

<script>
function Component() {
    const self = this;

    self.toggle = function () {
        self.modal.closed = !self.modal.closed
    }
    
    self.onchange = function(prop) {
        console.log(prop)
    }

    // Default Properties
    self.title = 'My modal';
    self.position = 'center';
    self.draggable = true;
    self.resizable = true;
    self.closable = true;

    return `<div>
        <Modal :position="self.position" :draggable="self.draggable" :closable="self.closable" :resizable="self.resizable"
            :title="self.title" :closed="true" :minimizable="self.minimizable" :ref="self.modal">
            <div class="p20">
                <p>Quick example!</p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...
            </div>
        </Modal>
        <div class="form-group">
            <label>Title:</label>
            <input type="text" value="My window modal" :bind="self.title" />
        </div>
        <div class="form-group">
            <label>Position:</label>
            <select :bind="self.position">
                <option value="">Default</option>
                <option value="center">Center</option>
                <option value="right">Right</option>
                <option value="left">Left</option>
                <option value="bottom">Bottom</option>
            </select>
        </div>
        <div class="form-group">
            <Switch text="Draggable" :bind="self.draggable" />
        </div>
        <div class="form-group">
            <Switch text="Closable" :bind="self.closable" />
        </div>
        <div class="form-group">
            <Switch text="Resizable" :bind="self.resizable" />
        </div>
        <div class="form-group">
            <Switch text="Minimizable" :bind="self.minimizable" />
        </div>
        <input type="button" value="Toggle Modal" id="button" onclick="self.toggle" />        
    </div>`
}

lemonade.render(Component, root);
</script>
</html>
```

## Related Tools

- [JavaScript Modal](https://jsuites.net/docs/modal) - Standalone modal component with remote content support