Overview
Modalify is a lightweight Javascript framework for creating customizable and responsive modal dialogs in web applications. With Modalify, you can easily create pop-up windows that can display various types of content, such as texts, images, inputs, and html content. Unlike other complex and bloated modal frameworks, Modalify is simple to use and does not require any external dependencies or plugins. It is perfect for web developers who want to save time and effort when implementing modals without sacrificing the flexibility and functionality of their designs. Modalify is also highly customizable, allowing you to easily modify the appearance and behavior of your modals to fit your specific needs.
Getting Started
To get started with Modalify, you can download the latest release from the GitHub repository or install it via npm install modalify
Usage
Once you have installed Modalify, make sure to include both the Modalify.css and Modalify.js files in your project.
HTML
1
2
To create a simple dialog modal, use the instance of the Modalify.Dialog function:
JAVASCRIPT
1
2
3
4
5
6
7
8
const dialog = new Modalify.Dialog({ // Create a new instance of Modalify.Dialog
title: { // Define the title of the dialog
data: "Dialog Title" // Set the text for the dialog's title
},
text: { // Define the text of the dialog
data: "Dialog Text" // Set the text for the dialog's main content
}
});
Try it Out
To create a simple confirmation modal, use the instance of the Modalify.Confirm function:
JAVASCRIPT
1
2
3
4
5
6
7
8
const confirm = new Modalify.Confirm({ // Create a new instance of Modalify.Confirm
title: { // Define the title of the confirmation box
data: "Confirm Title" // Set the text for the confirmation box title
},
text: { // Define the text of the confirmation box
data: "Confirm Text" // Set the text for the confirmation box main content
}
});
Try it Out
To create a simple prompt modal, use the instance of the Modalify.Prompt function:
JAVASCRIPT
1
const prompt = new Modalify.Prompt(); // Create a new instance of Modalify.Prompt
Try it Out
Don't forget that in order to display and hide a specific modal, you have to call its show() and hide() functions respectively.
Here's a list of what properties you can include inside all the modals:
| Property | Functionality | Type | Values | Default |
|---|---|---|---|---|
| title.data | Sets the text for the modal title | String | Any text | |
| title.color | Sets the text color for the modal title | String | Any color | #000000 |
| title.font | Sets the font family to be used for the text of the modal title. If a font family is available, it will be used, otherwise a generic font will be used as a fallback. | String | Any font | Arial, Helvetica, sans-serif |
| title.underline | Sets the styling of the underline applied to the text of the modal title. | String | Any underline style | Solid |
| text.data | Sets the main content of the modal that display any desired message or information within the modal. The value of this property will be displayed in the body of the modal, typically below the title. | String | Any text | |
| text.font | Sets the font family to be used for the text of the modal main text. If a font family is available, it will be used, otherwise a generic font will be used as a fallback. | String | Any font | Arial, Helvetica, sans-serif |
| text.color | Sets the text color for the modal main text. | String | Any color | #000000 |
| backdrop.visible | Determines whether the backdrop is visible behind the modal or not. | Boolean | True and False | True |
| backdrop.clickable | Determines whether the backdrop is clickable or not. | Boolean | True and False | False |
| theme | Determines the color scheme used for the modal. | String | Dark and Light | Light |
| size | Defines the size of the modal. The exact dimensions associated with value of the size may vary depending on the specific styling of the modal. | String | Small, Medium and Large | Medium |
Here's a list of what properties you can only include for the dialog modal:
| Property | Functionality | Type | Values | Default |
|---|---|---|---|---|
| closeButton.data | Sets the text for the close button. | String | Any text | Close |
| closeButton.color | Sets the color for the close button. | String | Any color | #1f1f1f |
| closeButton.textColor | Sets the text color for the close button. | String | Any color | #ffffff |
| closeButton.callback | Executes a specified function when the close button has been clicked. | Function | Any function | |
| xButton | Controls the visibility of the X button on the dialog box. | Boolean | True and False | True |
| alignment | Sets the alignment of the content. | String | Left and Center | Left |
Here's a list of what properties you can only include for the confirmation modal:
| Property | Functionality | Type | Values | Default |
|---|---|---|---|---|
| buttons.confirm.color | Sets the color for the confirm button. | String | Any color | #1f1f1f |
| buttons.confirm.textColor | Sets the text color for the confirm button. | String | Any color | #ffffff |
| buttons.confirm.callback | Executes a specified function when the confirm button has been clicked. | Function | Any function | |
| buttons.cancel.color | Sets the color for the cancel button. | String | Any color | #1f1f1f |
| buttons.cancel.textColor | Sets the text color for the cancel button. | String | Any color | #000000 |
| buttons.cancel.callback | Executes a specified function when the cancel button has been clicked. | Function | Any function |
Here's a list of what properties you can only include for the prompt modal:
| Property | Functionality | Type | Values | Default |
|---|---|---|---|---|
| label.data | Sets the text for the label. | String | Any text | |
| label.textColor | Sets the text color for the label. | String | Any color | #000000 |
| buttons.submit.data | Sets the text for the submit button. | String | Any text | OK |
| buttons.submit.color | Sets the color for the submit button. | String | Any color | #1f1f1f |
| buttons.submit.textColor | Sets the text color for the submit button. | String | Any color | #000000 |
| buttons.submit.callback | Executes a specified function when the submit button has been clicked. | Function | Any function | |
| buttons.cancel.data | Sets the text for the cancel button. | String | Any text | Cancel |
| buttons.cancel.color | Sets the color for the cancel button. | String | Any color | #1f1f1f |
| buttons.cancel.textColor | Sets the text color for the cancel button. | String | Any color | #000000 |
| buttons.cancel.callback | Executes a specified function when the cancel button has been clicked. | Function | Any function | |
| input.type | Specifies the type of input that is required. | String | Text, Password, Number, Date, Datetime-local, Month, Week, and Time | Text |
| input.font | Sets the font family to be used for the input box. If a font family is available, it will be used, otherwise a generic font will be used as a fallback. | String | Any font | Arial, Helvetica, sans-serif |
| input.outline | Sets the visibility of the outline around the input box when it receives focus. | String | Any outline style | Solid |
| input.value | Sets the initial value of the input field. | String | Any text | |
| input.placeholder | Sets the placeholder text that is displayed in the input field when it's empty. | String | Any text | |
| input.align | Sets the text alignment within the input field. | String | Left, Right and Center | Left |
Future Updates
I'm always working on improving Modalify and adding new features. Here are some of the things that I have planned for the future updates:
If you have ideas for new updates and would like to provide a feedback, please feel free to contact me via email. My email address is sol.fioriginal@yahoo.com. I would greatly appreciate any suggestions you may have.