Ultra lightweight, dependency-free javascript library for creating dynamic & full-customizable modal dialogs.
✔ 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!
via npm
npm i frostify-modal
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();
This project is licensed under MIT license.
Konrad Sroga – @ksroga 🇵🇱