@lemonadejs/modal v2.8.1
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>
Programmatical - 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 |
---|---|
onclose? | Called when modal closes. |
onopen? | Called when modal opens. |
License
The LemonadeJS Modal is released under the MIT.
Other Tools
1 month ago
2 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
7 months ago
8 months ago
8 months ago
8 months ago
10 months ago
5 months ago
7 months ago
5 months ago
7 months ago
10 months ago
7 months ago
5 months ago
5 months ago
8 months ago
10 months ago
2 years ago