Dialog How To

This component allows you to create different types of modal dialogs:

  • info - simple window, only with the specified content
  • alert - window with an ok button and the specified content
  • confirm - window with ok and cancel buttons and the specified content

All the dialogs can be closed with the ESC key, being the use of this shortcut similar to clicking on the cancel button.

The dialogs which have an OK button can be closed with the Enter key, being this action similar to clicking on the OK button.

Initial configuration

To use this component you need the following files:

<script type="text/javascript" src="http://js.sapo.pt/SAPO/"></script> 
<script type="text/javascript" src="http://js.sapo.pt/SAPO/Dom/Event/0.1/"></script>
<script type="text/javascript" src="http://js.sapo.pt/SAPO/Dom/Element/0.1/"></script>
<script type="text/javascript" src="http://js.sapo.pt/SAPO/Utility/Dimensions/0.1/"></script> 
<script type="text/javascript" src="http://js.sapo.pt/SAPO/Component/Dialog/1.1/"></script> 


Options

The following options can be used with all types of dialogs. Only the message option is mandatory. All the other ones are optional.

  • message - content to be shown
  • width - width
  • height - height
  • onComplete - callback to be executed when the dialog is ready. Useful for manipulating contents existent on the dialog.
  • className - css class applied to the dialog.
  • elementId|DOMElement - id or DOM element. If specified, the dialog will be rendered only over this element instead of over all the page.
  • callBackCancel - callback executed when the dialog is closed with a cancel button (or ESC key).


The following options can be used only on the alert and confirm dialogs and are all optional.

  • image - image to be used on the OK button
  • okLabel - text to be used on the OK button
  • callBack - callback executed when the dialog is closed with an OK button (or Enter key).


The following options can be used only on the confirm dialog, and are optional:

  • imageCancel - image to be used on the cancel button
  • cancelLabel - text to be used on the cancel button

Examples


SAPO.Component.Dialog.info("this is a message");


or


SAPO.Component.Dialog.info({
    message: "this is a message"
});


For all other types of dialogs, you just need to use the corresponding methods: alert or confirm