:: AUI. Cuadro de diálogo modal

Alloy es un framework javascript utilizado - entre otros - por el CMS Liferay, que lo incluye de forma nativa a partir de las versión 6.0.

Este framework fue construido a partir de YUI 3, otro framework desarrollado por Yahoo, por lo que Alloy dispone de las funcionalidades originales.

En definitiva, Alloy implementa funcionalidades para la mayoría de código desarrollado para Liferay.



Ejemplo de diálogo modal:

< script type='text/javascript' >
AUI().ready('aui-dialog', function(A) {
   var instance = new A.Dialog({
      bodyContent: 'Contenido del cuadro de diálogo',
      centered: true,
      constrain2view: true,
     destroyOnClose: true,
     draggable: true,
     height: 250,
     resizable: false,
     stack: true,
     title: 'Ejemplo de diálogo modal',
     width: 500,
     modal:true,
     cssClass: 'clasePrueba',
     id: 'identificadorDialog',
     buttons: [
       {
           text: 'Alerta1',
           label: 'Aceptar',
           handler: function() {
           alert('alerta1');
       }
     },
      {
         text: 'Alerta2',
         label: 'Cancelar',
         handler: function() {
         alert('alerta2');
      }
    }
   ]
 }).render();
});
< / script >

El significado de los distintos parámetros es el siguiente:

bodyContent (string): Es el contenido del cuadro de diálogo, el cual puede contener texto plano, código o portlets

centered (boolean): Establece si el cuadro de diálogo aparecerá o no centrado en pantalla

constrain2view (boolean): Comprime el cuadro de diálogo para que sólo se vea la región visible del portlet.

destroyOnClose (boolean): Destruye el cuadro de diálogo cuando lo cerramos. En caso de no destruirlo, quedaría creado pero oculto

draggable (boolean): Establece si el cuadro de diálogo podrá ser o no re-ubicado en pantalla

height (int): Establece la altura del cuadro de diálogo

resizable (boolean): Establece si el cuadro de diálogo podrá ser o no re-dimensionado

title (string): Establece el título del cuadro de diálogo

width (int): Establece el ancho del cuadro de diálogo

modal (boolean): Establece si es cuadro de diálogo es o no modal

butons (array): Permite añadir botones al cuadro de diálogo, estableciendo la acción tras su pulsación

close (boolean): Muestra el  icono de cerrar el cuadro de diálogo

cssClass (string): Permite añadir una clase al cuadro de diálogo

id (string): Asigna un identificador al cuadro de diálogo