Overwrite JS Alert

Admin Mar 18, 2020
Facebook Twitter Google + LinkedIn Pinterest Email Share...

I recently needed to create a popup that had more than the standard OK button, so after some searching I stumbled upon a script to overwrite the window.alert method with a custom method.

JS Function
  1. <script type="text/javascript">
  2.                 // Overwrite the alert() method
  3.                 window.alert = function (sMessage, title, msgtype) {
  4.                         if (title == undefined) {title = 'Alert:';}
  5.                         if (msgtype == undefined) {msgtype = 'info';}
  6.                 //create jqueryui dialog
  7.                         var alertDialog = $('<div id="msgDialog"><div>' + sMessage + '</div></div>');
  8.                         alertDialog.dialog({
  9.                                 modal: true,
  10.                                 title: '<span class="ui-icon ui-icon-'+ msgtype +'" style="margin-right: 0.3em; float: left;"></span> ' + title,
  11.                                 buttons: {
  12.                                         Ok: function () {
  13.                                                 $(this).dialog("close");
  14.                                         }
  15.                                 }
  16.                         });
  17.                         return false;
  18.                 };
  19.         </script>
Usage:
  1. alert('At least 1 booking must be selected!!', 'Missing Parameter','alert');

For the third parameter I am passing in the last part of the ui-icon name, ie. alert, info, notice.

That’s about it, this is probably more for me to remember than to blog!

Add comment