@lemonadejs/modal
v3.2.0
Published
LemonadeJS modal is a JavaScript component to create floating modals.
Downloads
388
Maintainers
hodewareReadme
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/modalCDN
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:
onmoveandonresize.
3.1.0
- Close modal using the keyboard by pressing
Shift + Tabon the icon.