Modal

• Introduction
• Basic Example
• Real World Example

Provides a resizable, drag and drop window with toolbar functionality.

---

Getting Started

First load the seed and CSS files, if you haven't yet.

<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Then initialize AlloyUI and load the Modal module.

YUI().use(
  'aui-modal',
  function(Y) {
    // code goes here
  }
);

---

Using Modal

Create an HTML element to house the modal window.

<div id="modal"></div>

Then initialize a new instance of modal, rendering it to your HTML element, passing in some bodyContent and headerContent.

Set centered to true to position the modal in the center of your window. Don't forget to render it!

YUI().use(
  'aui-modal',
  function(Y) {
    var modal = new Y.Modal(
      {
        bodyContent: 'Modal body',
        centered: true,
        headerContent: 'Modal header',
        render: '#modal'
      }
    ).render();
  }
);

Configuring Modal

By default, all instances of modal can be resized and dragged. Both of these features can be disabled by setting resizable and draggable to false.

YUI().use(
  'aui-modal',
  function(Y) {
    var modal = new Y.Modal(
      {
        bodyContent: 'Modal body',
        centered: true,
        draggable: false,
        headerContent: 'Modal header',
        render: '#modal',
        resizable: false
      }
    ).render();
  }
);

A defined height and width can be set, and the resizing handles can be repositioned to any side of the modal.

YUI().use(
  'aui-modal',
  function(Y) {
    var modal = new Y.Modal(
      {
        bodyContent: 'Modal body',
        centered: true,
        headerContent: 'Modal header',
        height: 200,
        render: '#modal',
        //setting a bottom and right side handle
        resizable: {
          handles: 'b, r'
        },
        width: 300
      }
    ).render();
  }
);

A useful functionality of modal, is the seamless inclusion of toolbars, which can be added to the header, body, and even footer of the modal.

YUI().use(
  'aui-modal',
  function(Y) {
    var modal = new Y.Modal(
      {
        bodyContent: 'Modal body',
        centered: true,
        headerContent: 'Modal header',
        render: '#modal',
        toolbars: {
          body: [
            {
              label: 'Button'
            }
          ],
          footer: [
            {
              label: 'Close'
            }
          ]
        }
      }
    ).render();
  }
);