Any JQuery alert() replacement for JavaScript's native one?

Question

I would like to replace the native javascript alert() with my own, so that I would be able to control the theme and have it more JQueryUI look and feel. I\'ve tried numerous alt

Answer 1

If you are looking also for alternative behavior you might wanna try: http://plugins.jquery.com/project/freeow

it also alerts the user but does not lock the browser as "Matt Ball" said

Answer 2

In the mean time i also recently created a new function to allow confirm boxes with jqueryui dialog.

It is extremely easy to use

dlgConfirm('Are you sure you want to cancel this change-email request? <br><label>Current password<br><input type="password"></label>',
             'Cancel Email Change', 'Continue', function(dlg){
       //do ajax or something
       return false; //do not close dialog until ajax is complete
    }

dlgConfirm('Are you sure you want to submit this form', function(dlg){
    $('form', dlg).submit();
    return true;
});

Here is the source code (public domain):

<script>
   /**
    * Open confirmation dialog (jqueryui modal)
    *
    * @param {string} c_text text/html to show in the dialog box
    * @param {string|function(dlg_element)} c_title|confirm_callback title of the dialog box (or callback function)
    * @param {string|function(dlg_element)} c_btn_text|confirm_callback confirm button text (or callback function)
    * @param {string|function(dlg_element)} c_btn_cancel_text|confirm_callback cancel button text (defaults to 'Cancel') (or callback function)
    * @param {function(dlg_element)} confirm_callback callback after the modal box is confirmed 
    */
   function dlgConfirm(c_text, c_title, c_btn_text, c_btn_cancel_text, confirm_callback){

      if (typeof(confirm_callback) !== 'function'){
         if (typeof(c_title) == 'function'){
            confirm_callback = c_title;
         }else if (typeof(c_btn_text) == 'function'){
            confirm_callback = c_btn_text;
         }else if (typeof(c_btn_cancel_text) == 'function'){
            confirm_callback = c_btn_cancel_text;
         }
      }

      if (typeof(c_text) !== 'string'){
         c_text = 'Are you sure?';
      }
      if (typeof(c_title) !== 'string'){
         c_title = 'Confirm';
      }  
      if (typeof(c_btn_text) !== 'string'){
         c_btn_text = 'Confirm';
      }  
      if (typeof(c_btn_cancel_text) !== 'string'){
         c_btn_cancel_text = 'Cancel';
      }     

      if ($('#dlgConfirm').length == 0){
         $('body').append('<div id="dlgConfirm" title="Confirm" style="display: none">Are you sure?</div>');
      }
      var btns = {};
      btns[c_btn_text] = function() {
             var dlg = this;
             if (typeof(confirm_callback) == 'function'){
                if (confirm_callback(dlg) !== false){
                   $(this).dialog('close');
                }
             }          
      };
      btns[c_btn_cancel_text] = function() {
             $( this ).dialog("close");
      };

      $('#dlgConfirm').dialog({
         title: c_title,
         autoOpen: false,
         resizable: false,
         //height:170, //commented out so autosize works
         modal: true,
         buttons: btns
       }).html(c_text).dialog('open');
   }
   </script>

Answer 3

You can use and perfectly control this ui dialogs http://jqueryui.com/demos/dialog/

Just evoke them when needed.