Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@lemonadejs/modal

hodeware1755.0.0TypeScript support: included

LemonadeJS modal is a JavaScript component to create floating modals.

javascript modal, lemonadejs modal, js modal, modal js

readme

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.

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