JavaScript Modal

JavaScript Modal

JavaScript Components

Component 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

npm install @lemonadejs/modal

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.
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 example

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

<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" />

<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>
import lemonade from 'lemonadejs'
import Modal from '@lemonadejs/modal';
import '@lemonadejs/modal/dist/style.css';

export default function App() {
    const self = this;

    self.toggle = function () {
        self.modal.closed = !self.modal.closed
    }

    return `<>
        <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="self.toggle" />        
    </>`
}
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)

    return (<>
        <Modal ref={modalRef} width={400} height={200} title={"My window modal"} closed={closed}
            closable={true} draggable={true} position={"center"}>
            <div>
                <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={() => setClosed(!closed)} />
    </>);
}
<template>
    <Modal ref="modal" :position="center" :width="400" :height="200" title="My window modal"
       :closed="true" :closable="true" :draggable="true" position="center">
        <div>
            <p>Quick example!</p>
            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</div>
        </div>
    </Modal>
</template>
<script>
import Modal from '@lemonadejs/modal/dist/vue';

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

export default {
    name: 'App',
    components: {
        Modal,
    },
    data() {
        return {
            width: 400,
            height: 200,
            title: "My window modal",
            closed: true,
            closable: true,
            draggable: true,
            position: 'center',
        };
    }
};
</script>

Minimizable modals

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

<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" />

<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>
import lemonade from 'lemonadejs';
import Modal from "@lemonadejs/modal";
import "@lemonadejs/modal/dist/style.css"

export default function Component() {
    const self = this;

    self.setLeft = function () {
        self.modalRef.left = 0
    }

    return `<div>
        <Modal :draggable="true" title="Drag by clicking here" :width="200"
            :height="200" :ref="self.modalRef" />
    </div>`
}
import React, { useRef } from "react";
import Modal from "@lemonadejs/modal/dist/react";
import "@lemonadejs/modal/dist/style.css";

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

    const setLeft = () => {
        modalRef.current.left = 0;
    };  

    return (<>
        <input type="button" onClick={setLeft} value="Set to Left" />
        <Modal ref={modalRef} draggable={true} title={"Drag by clicking here"} width={200} height={200} />
    </>);
}
<template>
    <input type="button" @click="setLeft" value="Set to Left" />
    <Modal ref="modal" :draggable="true" title="Drag by clicking here" :width="200" :height="200" />
</template>
  
<script>
import Modal from '@lemonadejs/modal/dist/vue';
import '@lemonadejs/modal/dist/style.css'

export default {
    name: 'App',
    components: {
        Modal,
    },
    methods: {
        setLeft() {
            this.$refs.modal.current.left = 0;
        }
    }
};
</script>

Advanced example

Reactive properties

Please open the modal and change the configuration. You can have a compreensive configuration that makes this plugin a very useful reusable JavaScript indepdent of the framework you are using.

<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) {
        if (prop === 'position') {
            self.modal.top = '0';
            self.modal.left = '0';
        }
    }

    // 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">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>