FrostifyModal.js

Ultra lightweight, dependency-free javascript library for creating dynamic & full-customizable modal dialogs.

Features

✔ Full-customizable styles

✔ Closes modal dialog on overlay click

✔ Closes modal dialog on pressing the ESC key

✔ Pressing TAB is working inside the modal.

✔ Ultra lightweight - it's only ~9kb!

Installation

via npm

npm i frostify-modal

Usage

Example usage:

FrostifyModal.set({
    title: 'Modal title',
    content: 'Text content',
    onok: () => {
        alert('Clicked ok button');
        return false; // do not close modal
    },
    oncancel: () => {
        alert('Clicked cancel button');
    },
    labels: {
        ok: 'Okay!',
        cancel: 'Cancel'
    }
}).show();

Available methods:

Method name	Arguments	Description
set()	Empty string	Modal title.

Available config parameters:

Name	Default value	Description
title	Empty string	Modal title.
content	Empty string	Modal content.
onOk	null	Submit action callback.
onCancel	null	Cancel action callback.
isClosable	true	Defines if modal is closable.
isDraggable	true	Defines if modal is draggable.
reverseButtons	false	If true buttons are reversed.
labels	ok: Okay cancel: Cancel	Define button labels.
containerStyles	Empty object	Contains modal container styles. You can use any css styles here.
headerStyles	Empty object	Contains modal header styles. You can use any css styles here.
bodyStyles	Empty object	Contains modal body styles. You can use any css styles here.
footerStyles	Empty object	Contains modal footer styles. You can use any css styles here.
buttonsStyles	Empty object	Contains modal buttons styles. You can use any css styles here.

Example with all availables configuration parameters:

FrostifyModal.set({
    title: 'Modal title',
    content: 'Text content',
    onok: () => {
        alert('Clicked ok button');
        return false; // do not close modal
    },
    oncancel: () => {
        alert('Clicked cancel button');
    },
    labels: {
        ok: 'Okay!',
        cancel: 'Cancel'
    },
    isClosable: true,
    isDraggable: true,
    reverseButtons: false,
    containerStyles: {
        radius: '25px',
    },
    headerStyles: {
        background: '#FFFFFF',
        color: '#000000',
        textAlign: 'left',
    }
}).show();

Licensing

This project is licensed under MIT license.

Created and maintained by

Konrad Sroga – @ksroga 🇵🇱