Custom JavaScript Alert Box with modernAlert.js

In JavaScript, there are three native popup boxes: Alert, Confirm and Prompt. I personally like to use them because these functions cannot be replaced by custom coding. Yes, I am right, you cannot hold the execution of JavaScript like these functions do. However, sometimes we have to tweak somewhere when it is about the design.
These popup boxes look different in every web browser along with their ugly appearance.

As I mentioned already that we cannot achieve exact duplicate of these functions but we can have something similar to it.


I wrote a pure JavaScript function, which can replace these native functions. And we can customize the appearance as well.

modernAlert.js is a small, Lightweight Library to optionally override native JavaScript functions: Alert, Confirm and prompt. It provides customizable HTML popup instead of browser-based popup, which can be styled using number of arguments and traditional way of using CSS.


By default native functions are replaced with modernAlert functions but this can be turned off in the constructor.

Features

• Customize pop-ups appearance using CSS and number of arguments
• Background overlay with customizable color and blur feature
• Customize button labels
• Support HTML in the message
• Pass callback function in Alert
• Pass other arguments to the callback function
• Optionally override native JavaScript functions
• Better usability just like native functions
• Works with all modern browsers and mobile browsers
• Written in pure JavaScript

How to use it:
Download the script from https://github.com/5um17/modernAlert and follow the readme.md instructions to use it in your project.

Examples: 

• Example of Alert box

  <a class="scg-button" href="#" onclick="alert('This is example of Alert', 'Simple Alert'); return false;">Alert</a>

  Alert
• Example of Confirm box

  <a class="scg-button" onclick="confirm('Example of confirm box', 'Simple Confirm', function(input){var str = input === true ? 'Ok' : 'Cancel'; alert('You clicked ' + str, 'Simple Alert');}); return false;" href="#">Confirm</a>

  Confirm
• Example of Prompt box

  <a class="scg-button" onclick="prompt('Example of Prompt', 'Simple Prompt', function(input){alert('You entered ' + input, 'Simple Alert');}); return false;" href="#">Prompt</a>/code>

  Prompt

Detailed uses and customization of pop-up boxes are given here https://github.com/5um17/modernAlert#readme

For queries and suggestions you can comment here. For reporting issues and contributing to the code please use GitHub repository https://github.com/5um17/modernAlert