Your Internet Explorer is too old :( Please upgrade to latest IE or switch to Firefox/Google Chrome for better view!

September 19, 2015

Custom JavaScript Alert Box with modernAlert.js

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 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.

How to use it:
Download the script from and follow the instructions to use it in your project.

  • Example of Alert box
    <a class="scg-button" href="#" onclick="alert('This is example of Alert', 'Simple Alert'); return false;">Alert</a>
  • 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>
  • 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>
Detailed uses and customization of pop-up boxes are given here

For queries and suggestions you can comment here. For reporting issues and contributing to the code please use GitHub repository 


  1. is it possible to call confirm method inside javascript function and get the output to a variable.. return 1 if Yes is clicked, else return 0 ?

    1. No! That is the limitation with every custom alert box. This can be done only using native confirm box. However, you can call the whole function in which you want to use confirm and get the return value as that function argument.

  2. doesn't work in IE 11, clicking on OK doesn't close the alert

  3. its not working in IE browser

  4. I can see it is not working in IE. I will try to fix this in next release. Thanks!

    1. Could you fix this problem?

    2. Please allow me some time I will fix it ASAP.

  5. can you make the alertbox vertically scrollable?

    1. Please send the request/issue here with the all details you have!

  6. I changed this line and it worked for me.

    window.modernAlert.addRemoveClass("maActive", !0), e && (n = document.getElementById(e)) && $('.modernAlertWrapper').remove(), "object" == typeof t[0] && $('.modernAlertOverlay').remove()