Fork me on GitHub

Dialog

Displays information in a dialog window that can be dragged or presented as a modal.


Getting Started

First load the seed file, if you haven't yet.

<script src="https://cdn.alloyui.com/1.0.3/aui/aui-min.js"></script>

Then initialize AlloyUI and load the Dialog module.

AUI().use(
  'aui-dialog',
  function(A) {
    // code goes here
  }
);

Using Dialog

Let's create a new instance of the Dialog component, then write some content into bodyContent and define a title for this dialog box. Finally, let's render it!

AUI().use(
  'aui-dialog',
  function(A) {
    new A.Dialog(
      {
        bodyContent: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
        title: 'Dialog title'
      }
    ).render();
  }
);

Configuring Dialog

There are some other options that you can pass to your Dialog instance.

For example, you can align the component on the center of your screen by setting centered equal to true. You can even change the width and height of the dialog box.

AUI().use(
  'aui-dialog',
  function(A) {
    new A.Dialog(
      {
        bodyContent: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
        centered: true,
        height: 150,
        title: 'Dialog title',
        width: 500
      }
    ).render();
  }
);

Also, you can turn off the ability to drag or resize your dialog, you just have to change the draggable or resizable option to false.

AUI().use(
  'aui-dialog',
  function(A) {
    new A.Dialog(
      {
        bodyContent: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
        draggable: false,
        resizable: false,
        title: 'Dialog title'
      }
    ).render();
  }
);

Another cool thing is that you can add buttons to your dialog component. Just create an array with a label, which will be the text of your button, and a handler, which will be the function executed after you click on it.

Then go to your A.Dialog and define the buttons option as your newly created array.

AUI().use(
  'aui-dialog',
  function(A) {
    var myButtons = [
      {
        handler: function() {
          this.set('title', 'New dialog title');
        },
        text: 'Change title'
      },
      {
        handler: function() {
          this.set('bodyContent', 'New body content');
        },
        text: 'Change body'
      }
    ];

    new A.Dialog(
      {
        bodyContent: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
        buttons: myButtons,
        centered: true,
        title: 'Dialog title'
      }
    ).render();
  }
);
For more information about configuration, check out our API Docs.