YUI DHTML Widget : Dialogs

Example:Click and test it now

This is a Select Element This is a Select Element



Available Dialogs

Create an simple alert box

You can simply open a alert box by a STRING

var oDialog = YAHOO.My.UI.Dialog.alert('Hello World');

Or you can open a alert box by an OBJECT

var oConfig = { html:'Hello World' } var oDialog = YAHOO.My.UI.Dialog.alert(oConfig);

Setting Dialog by Object Literal Format is very useful and simple, let's do something more...

var callback = function(oConfig , domEvent) { YAHOO.My.UI.Dialog.notify('Dialog onened at ' +oConfig.arguments + ' is closed. \n\n You clicked button ' + domEvent.buttonIndex + '') }; var oConfig = { html:'Hello World', width:300, height:100, arguments:new Date, callback:callback }; var oDialog = YAHOO.My.UI.Dialog.alert(oConfig);

Actually, we can apply varies settings to Dialog, and all of these setting sare optional.

var oConfig = { /*Your HTML Markups to be displayed */ html:STRING , /*Texts of Buttons at the bottom of Dialog */ buttonText:STRING or Array , /*Apply a fixed pixel width to Dialog */ width:NUMBER, /*Apply a fixed pixel height to Dialog */ height:NUMBER, /*if true, Dialog will be invisible as fefault */ hide:BOOL, /*If width is not assigned, the Dialog's width will depends on the width of its contents, and minWidth can give Dialog a minimum width.*/ minWidth:NUMBER, /*If width is not assigned, the Dialog's height will depends on the width of its contents, and maxWidth can give Dialog a maximum width.*/ maxWidth:NUMBER, /*Pass an OBJECT to Dialog for later use*/ arguments:OBJECT /*When a BUTTON of Dialog is clicked, dialog may be closed, and will fire the callback function if it existes*/ callback:FUNCTION( /*setting of Dialog*/ oConfig, /*if Dialog is's closed by user's click, then pass this domEvent. You can read an expendo named "buttonIndex" of domEvent to detect that which button is clicked. */ domEvent, /*As long as the first button at bottom of the Dialog is clicked, you will get "true", otherwise it returns "false" */ boolConfirm), /*When a Dialog is closed, onBeforeClose will be fired. if onBeforeClose() return falsy value, then this Dialog won't be closed, thus Dialog's callback() will not be called neither.*/ onBeforeClose:FUNCTION( /*setting of Dialog*/ oConfig, /*if Dialog is's closed by user's click, then pass this domEvent. You can read an expendo named "buttonIndex" of domEvent to detect that which button is clicked. */ domEvent, /*As long as the first button at bottom of the Dialog is clicked, you will get "true", otherwise it returns "false" */ boolConfirm), /*For Balloon Dialog only. Balloon Dialog will show up near by its target if target is available*/ target:HTMLElement, /*For Process Dialog Only. Dialog will display a grey put mask behind if displayMask is true*/ displayMask:BOOL /*For Popup and Modal Dialog Only. Dialog can be resizable*/ resize:BOOL ) }

Available Methods of a Dialog