Popup with Image

By clicking on the image we can show a popup. This popup will display an image (especially good for mockups). The image is chosen by setting the bd attribute to a URL that points to the image.

$proto('#avatar', {
  Click: {
    onClick: {
      Popup: {
        id: 'about-bill',
        width: '510px',
        effect: {effect:YAHOO.widget.ContainerEffect.FADE, duration: 0.2},
        hd: 'Bill Scott Yapping',
        bd: 'http://farm1.static.flickr.com/46/113016311_39e40803ec.jpg',
        ft: ''
      }
    }
  }
});

Popup with HTML Content

By clicking on the image we can show a popup. This popup will display some static content. The text is defined by setting the bd attribute to HTML text.

$proto('#avatar-2', {
  Click: {
    onClick: {
      Popup: {
        id: 'static-content',
        width: '300px',
        effect: {
          effect:YAHOO.widget.ContainerEffect.FADE, duration: 0.2
        },
        hd: 'Static Content',
        bd: '<p>This is a paragraph of text. It starts in the previous sentence. It finishes at this period.</p><p>This is some <strong>bold text</strong> and some <em>italic text</em>.</p>',
        ft: ''
      }
    }
  }
});

Popup on Set of Elements

Illustrates setting the content of the dialog to the content of another element on the page. The bdCopyFrom attribute is instead of the bd attribute to select the element to copy content from. Click on any title below to see a popup that displays the corresponding content.

Title One

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam in augue. Aliquam auctor, felis ut nonummy vulputate, sapien justo consectetuer nisl, id ultricies velit sem in nibh.

Title Two

Pellentesque tempor. Donec dignissim, urna eget gravida varius, ipsum nisl blandit augue, eget tempus nibh felis non tortor. Etiam nec mi sed ante hendrerit venenatis.

Title Three

Duis cursus ullamcorper nulla. Proin nibh nisi, pretium eget, mattis ut, dictum eget, neque. Aliquam mi turpis, congue eget, rhoncus et, vehicula vel, sem. Curabitur mattis magna.

Title Four

Aenean bibendum sodales ipsum. Nullam placerat velit et justo. Nunc scelerisque. Suspendisse potenti. Donec massa. Nulla facilisis. Donec pulvinar consequat orci.
$proto('.header', {
  SetStyle: {cursor: 'pointer'},
  Click: {
    onClick: {
      Popup: {
          id: 'content-popup',
        width: '510px',
        effect: {
          effect:YAHOO.widget.ContainerEffect.FADE, duration: 0.2
        },
        hd: 'Content of Section',
        bdCopyFrom: '.content',
        ft: ''
      }
    }
  }
});