YUI Dialogs




The standard JavaScript alert() and confirm() dialog boxes look so 1995... (although it hasn't stopped Google from using them in Blogger, Gmail and Docs).

For those who don't remember what they look like, here are two examples:


YUI (Yahoo User Ineterface) to the rescue! This Ajax/JavaScript library comes with a few nicely styled visual components, including support for modal dialogs.

The following functions may be used to display YUI styled alerts:

function yuiErrorAlert(title, message) {
return yuiAlert(title, message, YAHOO.widget.SimpleDialog.ICON_BLOCK);
}

function yuiWarnAlert(title, message) {
return yuiAlert(title, message, YAHOO.widget.SimpleDialog.ICON_WARN);
}

function yuiInfoAlert(title, message) {
return yuiAlert(title, message, YAHOO.widget.SimpleDialog.ICON_INFO);
}

function yuiAlert(title, message, icon) {
modalDialog = new YAHOO.widget.SimpleDialog(title,
{ width: "300px",
fixedcenter: true,
modal:true,
visible: false,
draggable: true,
close: false,
text: message,
icon: icon,
constraintoviewport: true,
buttons: [ { text:"Ok", handler:function(){this.hide();}, isDefault:true }]
}
);
modalDialog.setHeader(title);
modalDialog.render(document.body);
modalDialog.show();
return false;
}

yuiErrorAlert('Oops', 'Something broke.');
And the results:

Slightly better, but this could be styled to suit your look-and-feel. You can also add effects to these to fade-in/fade-out or slide on show and hide. The one caveat is that these functions are non-blocking so your code will continue executing after displaying the alert. You'll need to modify with custom handlers if you care about when the dialog is closed.

What about a YUI confirm dialog? Simple:

function yuiConfirm(title, message, yesHandler, noHandler) {
var handleYes = function() {
confirmDialog.destroy();
if(yesHandler) yesHandler();
};

var handleNo = function() {
confirmDialog.destroy();
if(noHandler) noHandler();
};


confirmDialog = new YAHOO.widget.SimpleDialog("yuiConfirm",
{ width: "300px",
fixedcenter: true,
visible: false,
draggable: false,
close: false,
modal: true,
text: message,
icon: YAHOO.widget.SimpleDialog.ICON_HELP,
constraintoviewport: true,
buttons: [ { text:"Yes", handler:handleYes, isDefault:true },
{ text:"No", handler:handleNo } ]
} );

confirmDialog.setHeader(title);
confirmDialog.render(document.body);
confirmDialog.show();
return confirmDialog();
}

yuiConfirm(
'Confirm Delete?',
'Are you sure you want to delete the selected user?',
function() {
alert('yup!');
}
);

Calling the above will show the following:


No big deal you might say. How about creating a dialog that shows a busy progress bar? Easy:

function yuiWait(message) {
// Initialize the temporary Panel to display while waiting for external content to load
wait =
new YAHOO.widget.Panel("wait",
{ width:"240px",
fixedcenter:true,
close:false,
draggable:false,
zindex:4,
modal:true,
visible:false
}
);

wait.setHeader(message);
wait.setBody('<img src="http://l.yimg.com/a/i/us/per/gr/gp/rel_interstitial_loading.gif" />');
wait.render(document.body);
wait.show();
return wait;
}

wait = yuiWait('Loading stuff...');
setTimeout(function(){wait.destroy()}, 3000);
And you get the following (the bar is an animated gif):

And finally, when doing lots of Ajax, you're sometimes faces with the problem of showing confirmation on a user's action. That is, consider reseting a user's password via a modal popup dialog. How do you tell the user the operation was successful? You can print a message at the bottom of the dialog, but then the user needs to manually close the dialog (an extra click). A better way may be to display a generic indicator for a few seconds such as the following:
function yuiOk() {
// Initialize the temporary Panel to display while waiting for external content to load
ok =
new YAHOO.widget.Panel("ok_panel",
{ fixedcenter:true,
close:false,
draggable:false,
zindex:4,
modal:true,
visible:false,
underlay:'none',
padding:0
}
);

ok.setBody('<img src="/images/ok.gif" />');
ok.render(document.body);
ok.show();

setTimeout(function(){ok.destroy();}, 1000);
}

yuiOk();

Which will dim the background and show a small green tick-box on the screen for 1.5 seconds as follows:

And there you have it. Just stick the above functions in a js include and you can use them throughout your application as simple one-liners. Enjoy!

Comments

  1. I just tried to implement your confirm code, however, there is an error on the line containing:

    return confirmDialog();

    confirmDialog is not a method, so it throws an error. do you have an updated version of your function?

    Thanks

    ReplyDelete
  2. Oops, typo. Should be just return confirmDialog, which will give you an object handle (not that you really need it as the dialog will destroy itself after user selects yes or no and calls the appropriate callback handler).

    ReplyDelete
  3. ah. thank you.

    do you know if there is a way to modify this script to be a replacement for the javascript confirm() method? so that it would actually return true or false when yuiConfirm() is called, like when confirm() is called?

    ReplyDelete
  4. I don't think you can do that because this dialog runs asynchronously, whereas the default confirm dialog is a blocking JS call, meaning it stops all JS from executing until user clicks a button.

    The way you use this is by passing in a Yes function and a No function.

    So for example, yuiConfirm('Bananas', 'Do you like bananas?', function() {alert('You said yes.')}, function(){alert('You said no.');})

    ReplyDelete

Post a Comment

Popular posts from this blog

Wkhtmltopdf font and sizing issues

Import Google Contacts to Nokia PC Suite

Can't delete last blank page from Word