myzymodal

A lightweight, high-performance, and dependency-free Vanilla JavaScript modal library. Modern, responsive, and easy to use.

Features

• Zero Dependencies: No jQuery or other libraries required.
• Lightweight: Tiny footprint for better performance.
• Fully Responsive: Works on desktop, tablet, and mobile.
• Customizable: Change titles, colors, and sizes easily.
• Modern Animations: Smooth CSS-based transitions.

Installation

Via NPM

npm install myzymodal

Via CDN

Include the CSS and JS files in your HTML:

• style: https://cdn.jsdelivr.net/npm/myzymodal/src/myzymodal.css
• script: https://cdn.jsdelivr.net/npm/myzymodal/src/myzymodal.js

Usage

1. HTML Markup

Create a div for your content and a trigger button:

<div id="modal-content" style="display:none;">
    <h2>Hello!</h2>
    <p>This is a modal created with myzymodal.</p>
</div>

<button id="btn-open">Show Modal</button>

2. Initialization

Initialize the modal in your JavaScript file:

const modal = new MyzyModal('#modal-content', {
    title: 'MyzyModal Title',
    headerColor: '#2c3e50',
    width: '600px'
});

document.getElementById('btn-open').addEventListener('click', () => {
    modal.open();
});

API Options

| Option | Type | Default | Description | | :--- | :--- | :--- | :--- | | title | String | '' | The text shown in the header. | | headerColor | String | '#34495e' | Background color of the header bar. | | width | String | '500px' | Maximum width of the modal window. | | closeOnOverlayClick | Boolean | true | Close the modal when clicking outside. | | resetOnClose | Boolean | false | Reset the modal content on close |

Methods

| Method | Description | | :--- | :--- | | open() | Shows the modal. | | close() | Hides the modal. |

License

Licensed under the MIT License.