Minimal Customizable Modal Dialog Boxes In JavaScript – msg.js

Preview:

Description:

A lightweight yet highly customizable JavaScript popup library for generating modal dialog boxes that fit various use cases, from alert notifications to input prompts.

How to use it:

1. To get started, import the msg.js script as follows:

<script type="text/javascript" src="msg.js"></script>

2. Show a custom message in the modal dialog. It currently offers seven predefined message types: Success, Info, Warning, Error, Confirm, Input, and Custom.

// success
showMsg("success", "Success message!")
// info
showMsg("info", "Info message!")
// warning
showMsg("warning", "Warning message!")
// confirmation dialog
showMsg("confirm", "Are you sure ?", fnOK, fnCancel)
// prompt dialog
showMsg("input", "Please enter your email address", fnFileName)
// custom dialog
showMsg("My new MSG type", "Custom message!")

3. The modals have a clean, minimal style out of the box, but you can also customize the design by overwriting default global variables as follows:

// Font family
MSG_HEADER_FONT = "Verdana, sans-serif"
MSG_CONTENT_FONT = "Verdana, sans-serif"
// Colors
MSG_HEADER_FONT_COLOUR = "#FFFFFF"
MSG_CONTENT_FONT_COLOUR = "#000000"
MSG_CONTENT_COLOUR = "#FFFFFF"
MSG_CONTENT_MAX_WIDTH = "386px"
MSG_SUCCESS_COLOUR = "#4caf50"
MSG_INFO_COLOUR = "#2196F3"
MSG_WARNING_COLOUR = "#ff9800"
MSG_ERROR_COLOUR = "#d32f2f"
MSG_CONFIRM_COLOUR = "#7308B0"
MSG_INPUT_COLOUR = "#7308B0"
MSG_CUSTOM_COLOUR = "#4caf50"
// Labels
MSG_TEXT_OK = "OK"
MSG_TEXT_CANCEL = "Cancel"
MSG_TEXT_CONFIRM_OK = "OK"
MSG_TEXT_CONFIRM_CANCEL = "Cancel"
MSG_TEXT_SUCCESS = "Success!"
MSG_TEXT_INFO = "Info..."
MSG_TEXT_WARNING = "Warning!"
MSG_TEXT_ERROR = "Error!"
MSG_TEXT_CONFIRM = "Confirm?"
MSG_TEXT_INPUT = "Input"
// shows icons
MSG_USE_ICONS = true