The JavaScript to instantiate the panel is as follows:
```
YUI().use("panel", function (Y) { // loading escape only for security on this page
{{>dialog-js}}
});
```
Reuse the Dialog
Since it's common to want the user to give their confirmation before some action
happens, this example passes a callback function to the dialog.
```
// a function to do when the user clicks the "OK" button in the dialog.
var doSomething = function(){
Y.log('Something was done.');
};
```
Each time you want to show a dialog for a different purpose, you can reuse the same
dialog and just:
Set the message text.
Change the icon.
Assign a function to the "OK" button (optional).
In this example, there's a callback property on the dialog object.
If you want to, you can set its value with a reference to your own
function so the dialog can trigger different actions each time it's shown.
This example removes the callback reference each time a dialog button is
clicked to make sure it's not unintentionally persisted.
If you use a callback, you'll need to add it every time the dialog is shown.
```
Y.one('.btn-show').on('click', function(){
// set the content you want in the message
Y.one('#dialog .message').setHTML('Are you sure you want to [take some action]?');
// set the icon (or none) that appears next to the message.
// the Class 'message' also needs to be maintained.
Y.one('#dialog .message').set('className', 'message icon-bubble');
/* classnames and images provided in the CSS are:
.icon-bubble
.icon-error
.icon-info
.icon-question
.icon-warn
.icon-success
.icon-none
*/
// set the callback to reference a function
dialog.callback = doSomething;
dialog.show();
});
```
The CSS
```
```
The Icon Source Files
Here we provide the
original source files
for the icons, in case you'd like to modify them, or create others. We created
them ourselves, just for you, so you can be sure they are open source.