Simple Message Box with JQuery UI

Although JQuery UI has a widget that allows you to easily display any sort of dialogue I missed that come pre-designed some very common types of uses. For example, a dialog where a message is displayed in a specific format (similar to the alert function () of javascript but to follow the layout of the page). I have also thrown much lack the kind of dialogue that asks the user to enter a string (like the Win32 InputBox). And as this case can be seen as an extension of the first problem I wrote this little function if anyone is off the hook.

<br />
<br />
class="prettyprint <pre lang-Javascript">
letBox var = function (t, m, v, f)
{
d =''+

m + '';

$ ('Body'). Append (d);

$ ('# LetBox'). Dialog ({

resizable: false,

height: 250,

width: 400,

modal: true,

buttons {

"OK": function () {

($('# letBox # let f '). val ());

$ (This). Dialog ("close");

$ ('# LetBox'). Remove ();

}

"Cancel": function () {

$ (This). Dialog ("close");

$ ('# LetBox'). Remove ();

}

}

close: function () {$ (this). remove ();}

}). Keyup (function (e) {

if (e.keyCode === 13) {

$ ('# LetBox'). Parent (). Find ('. Ui-button: first'). Trigger ('click');

}

});

$ ('# LetBox # let'). Select ();

$ ('. Ui-dialog-buttonpane'). Css ('font-size', '.7 em');
;} </ Pre>
<br />
<br />
The function (letBox) has 4 simple parameters: <br />
<br />
t <br />
Title to be the window <br />
m <br />
Message to be displayed before the edit box <br />
v <br />
Value to be displayed in the edit box initially <br />
f <br />
Function to be called if the user accepts the dialog <br />
<br />
<br />
The operation is very simple and I do not require much explanation. Just explain the lines from line 22 to 25. These lines serve to allow the user if they are in the edit box and press Enter to execute the same action as if you had clicked on the first button. So we supply the lack of a default button. <br />
<br />
The way to call is simple: <br />
class="prettyprint <pre lang-Javascript">
letBox ('Rename', 'Specify new name', 'Old Name', function (newValue) {
alert (newValue );})</ pre>
<br />
<br />

In this case show a dialog with the title 'Rename', a text which would 'Specify new name "and a text field with the value' old name '. If the user would give him the OK button execute the function specified as the last parameter and show an alert with the new value the user entered.