Use jQuery UI to pretty up the standard Javascript alert()

Written by Kevin on October 07, 2011

So I was working on a project that had many calls to the standard Javascript alert(). I wanted to pretty up those alerts without re-writing each one. Since I was already using jQuery and jQuery UI in the project, I decided I could convert all the alerts to jQuery UI Dialog Boxes.

Its a pretty simple process. First you create an empty div and give it a unique ID.

<div id=”override_javascript_alert”></div>
Next we need to override the window.alert function.

<div id=”override_javascript_alert”></div>

<script> window.alert = function(message) { }; </script>

Finally, all in one swoop we can put our message in the div and turn it into a jQuery UI Dialog with an OK button.

<div id=”override_javascript_alert”></div>

<script> window.alert = function(message) { $(‘#override_javascript_alert’).text(message).dialog({ modal:true, title:’Message’, buttons: { ‘OK’:function(){ $(this).dialog(‘close’); } } }); }; </script>

Hope you find this as useful as I did. You can add more parameters to the alert option and offer more customization.