easy-js-modal

v0.5.1

Published

a year ago

EasyJsModal - A lightweight, easy-to-use, and customizable modal plugin for JavaScript applications

Downloads

0High
0Medium
0Low

smargelov

easy-js-modal modal dialog popup lightbox javascript typescript library component iife es easy

EasyJsModal

EasyJsModal is a lightweight and customizable modal window solution. It allows you to create a modal window with a few lines of code.

Features

Easy to use and integrate into your project
Customizable appearance using configuration
Supports keyboard navigation and traps focus within the modal
No dependencies, lightweight, and efficient

Installation

Via NPM

To use EasyJsModal in your project, you can install it via npm:

npm install easy-js-modal

Via CDN

Include the following script and stylesheet in the <head> section of your HTML file:

<link
	rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/easy-js-modal/dist/style.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/easy-js-modal/dist-iife/easy-js-modal.min.js"></script>

Usage

To create a modal window, you need to instantiate the EasyJsModal class:

import EasyJsModal from 'easy-js-modal'

const content = 'Hello, World!'

const modal = new EasyJsModal(content)

By default, the modal window will contain the provided content and will be displayed when the open method is called:

modal.open()

To close the modal window, you can call the close method:

modal.close()

To customize the modal window, you can pass a config object as the second parameter of the EasyJsModal constructor. Additionally, you can customize the appearance of the modal window by passing a styles object as the third parameter:

const config = {
	animationDuration: 500,
	modalBlockClass: 'custom-modal'
}

const styles = {
	layoutBackgroundColor: 'rgba(0, 0, 0, 0.7)',
	windowBackgroundColor: '#f0f0f0',
	windowWidth: '80%',
	windowMaxWidth: '600px',
	windowPadding: '1.5rem',
	windowBorderRadius: '1rem',
	closeFontSize: '1.5rem'
}

const modal = new EasyJsModal(content, config, styles)

This will change the animation duration to 500ms and apply the custom-modal class to the modal window.

Configuration

The following options are available in the config object:

animationDuration (number, default: 300): the animation duration in milliseconds.
modalBlockClass (string, default: 'modal'): the class name of the modal container element.
onOpen (function, optional): a callback function that is called when the modal is opened.
onClose (function, optional): a callback function that is called when the modal is closed.

Styles

The following options are available in the styles object:

layoutBackgroundColor (string, default: 'rgba(0, 0, 0, 0.5)'): background color of the modal layout.
windowBackgroundColor (string, default: '#fff'): background color of the modal window.
windowWidth (string, default: '90%'): width of the modal window.
windowMaxWidth (string, default: '500px'): maximum width of the modal window.
windowPadding (string, default: '2rem'): padding inside the modal window.
windowBorderRadius (string, default: '0.5rem'): border radius of the modal window.
closeFontSize (string, default: '1.25rem'): font size of the close button.

Methods

open(): displays the modal window.
close(): hides the modal window.
setContent(newContent: string): replaces the content of the modal window with the provided new content.

Browser Support

EasyJsModal has been tested and works in modern browsers like Chrome, Firefox, Safari, and Edge. Internet Explorer 11 is not officially supported and may not work as expected.

Demo

Visit our demo pages to see EasyJsModal in action with different configurations:

Future Development

We have plans to further enhance EasyJsModal, including:

Allowing modals to be called from within other modals
Improving accessibility features
Allowing more customization options through configuration

We welcome contributions and suggestions to improve this project. Feel free to open issues or submit pull requests on the GitHub repository.

License

MIT License