@lemonadejs/modal NPM

LemonadeJS Modal

Official website and documentation is here

Compatible with Vanilla JavaScript, LemonadeJS, React, Vue 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:

$ npm install @lemonadejs/modal

CDN

To use modal via a CDN, include the following script tags in your HTML file:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script type="text/javascript" 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" />

Usage

Declarative - Quick example with Lemonade

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.modalRef.closed = !self.modalRef.closed
    }

    return `<>
        <Modal :center="true" :width="400" :height="200" title="My window modal" :ref="self.modalRef">
            <div style="display: flex; flex-direction: column; justify-content: center; 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" id="button" onclick="self.toggle" />        
    </>`
}

Quick example with React

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 (
        <div>
            <Modal center={true} width={400} height={200} title="My window modal" ref={modal}>
            <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', 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" id="button" onClick={toggle} />
        </div>
    );
}

Quick example with Vue

<template>
    <Modal ref='modal' :center="true" :width="400" :height="200" title="My window modal" >
     <div style="display: flex; flex-direction: column; justify-content: center; 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" id="button" @click="toggleModal" />
 </template>
 <script>
 import Modal from '@lemonadejs/modal/dist/vue';
 import '@lemonadejs/modal/dist/style.css'
 
 export default {
     name: 'App',
     components: {
         Modal,
     },
     methods: {
     toggleModal() {
        console.log(this.$refs.modal);
       this.$refs.modal.current.closed = !this.$refs.modal.current.closed;
     }
   }
 };
 </script>

Programmatically - Quick example with Javascript

<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="display: flex; flex-direction: column; justify-content: center; 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,
    center: true,
});
button.addEventListener('click', () => {
    console.log(modal.closed)
    modal.closed = !modal.closed;
});
</script>
</html>

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.