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 I DID just do successfully was to link to the JQuery website so that I didn't have to download anything and saw that the dialog box works.

However, the dialog box, from the example shown me, is linked to a div. That div is not going to help me if it's at the top of the screen and the input box is at the bottom. I have only one function in the header that is called from a number of textboxes. This function includes a javascript alert() with a message.

PLEASE, tell me the EXACT code I need to type in the function (We'll call it MyFunction() ) that will pop up a message wherever the MyFunction is being envoked..

If it was javascript, in the head sectio开发者_StackOverflown in a script we'd have:

<script type="text/javascript">

function digitsOnly(){
alert("Digits only, please");
}

</script>

and in a number of textboxes, we'd have:

<input type="test/javascript" onkeydown="digitsOnly()" />

I need a beautiful pop-up box to replace the javascript alert(); I don't need this do do anything other than pop up a message next to the calling textbox. If it's draggable and resizable, that would be the coolest thing. But for now, I'll be happy with what I mentioned..

I study languages all the time. I know I'll eventually learn JQuery too. But I need this done tonight if possible.

James

---

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

---

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.

---

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.

---

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

---

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;

---

alert = function(a){ my_alert(a); }

---

It took me reading the question about 100 times to understand what you meant by

"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 });