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

16 comments:

  1. that's amazing. Thank You so much.

    ReplyDelete
  2. 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 ?

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

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

    ReplyDelete
  4. its not working in IE browser

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

    ReplyDelete
    Replies
    1. Could you fix this problem?

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

      Delete
  6. can you make the alertbox vertically scrollable?

    ReplyDelete
    Replies
    1. Please send the request/issue here https://github.com/5um17/modernAlert/issues with the all details you have!

      Delete
  7. 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()

    CH

    ReplyDelete
  8. Hi Sumit, its really great , but i faced one issue that
    $( "#domid" ).focus();

    is not working can you fix this issue ASAP ?

    ReplyDelete
    Replies
    1. Thank you! Sorry but I do not understand what is the issue exactly.
      Can you please open an issue here https://github.com/5um17/modernAlert/issues with steps to reproduce?

      Delete
  9. Is IE 11 issue resolved?

    ReplyDelete
  10. I have checked IE issue. This error not a logical error, it is because IE doesn't support JavaScript remove function

    Since IE is an outdated browser and replaced with Edge so I am not going to fix it. You can workaround it following this comment

    ReplyDelete