How To Replace Javascript Alert (which Pops Up Where The Event Called It) With A Jquery Dialog Box?

Fellows, I'm going to break it down a little clearer. When I look at that JQuery UI stuff, I get absolutely confused as to what I need to download and where to put the files. What

Solution 1:

window.alert = function(message) {
    // put your dialog box launching code here.
}

Solution 2:

Take a look at jQuery UI's dialog. This won't replace the default alert() either, so you should go through your code and replace calls to alert(...) with dialog instances.

Solution 3:

Javascript's alert() function runs before anything else, so it's hard (if not impossible) to actually replace its default behavior. However, you can easily make your own function. Instead of:

$('.clickable').click(function() {
  alert("Clicked.");
});

Do this:

$('.clickable').click(function() {
  $('.dialog').dialog({ 
    // options...
  });
});

You will have to go through your code and replace each alert with this, however, that shouldn't be too big of a deal, especially if you're using something like Textmate, which has a "Search Project" feature.

Solution 4:

Timothy's answer was workable. See my comment afterward for the necessary addition. I copied and pasted from Timothy Khouri's answer with my comment attached:

"I'll need it to pop up, of course, where the textbox is located...just as a javascript alert box would."

I think you mean that if you were to scroll down partway through the page, and then call alert, that it would be centered to your current View Port (the stuff you see on the screen)... and that you want this new prettied up dialog box to do the same.

The answer is - "Yes"... Yes, jQuery will center the dialog box right there at your current view port just like an alert box would be.

You need to download and reference the main jQuery library AND ALSO the latest jQueryUI library AND ALSO one jQuery CSS theme.

Then it should be as easy as:

$("<p>Yo, G Dog<p>").dialog({ modal: true });

So Timothy's code worked almost perfectly. I had to do some messing around till I found the reason why it was causing two dialogs to open. No answers from Google searching. Just experimentation helped me to see that each HTML tag inserted into the dialog opened its own dialog, for some reason. The way to fix this was to contain all HTML tags within a div. Now not even the blank dialog occurs.

If you don't know what I'm talking about, use your own code and see what occurs. THEN, put more HTML tags within the parentheses. Example:

("<h3>Attention></h3><p>Yo, G Dog</p>").dialog({ modal: true });

Finally, place the h3 and p within a div and see the cool results:

("<div><h3>Attention></h3><p>Yo, G Dog</p></div>").dialog({ modal: true });

This latter piece of code will only display one dialog. :) Thanks for answering!

James

Solution 5:

Try this:

$.extend({ alert: function (message, title) {
  $("<div></div>").dialog( {
    buttons: { "Ok": function () { $(this).dialog("close"); } },
    close: function (event, ui) { $(this).remove(); },
    resizable: false,
    title: title,
    modal: true
  }).text(message);
}
});

More information here;