Demo of Popup Behavior
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: ''
}
}
}
});
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: ''
}
}
}
});
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', {
Click: {
onClick: {
Popup: {
id: 'content-popup',
width: '510px',
effect: {effect:YAHOO.widget.ContainerEffect.FADE, duration: 0.2},
hd: 'Content of Section',
bdCopyFrom: '.content', // use the html of the related element (class=content)
ft: ''
}
}
}
});
Click: {
onClick: {
Popup: {
id: 'content-popup',
width: '510px',
effect: {effect:YAHOO.widget.ContainerEffect.FADE, duration: 0.2},
hd: 'Content of Section',
bdCopyFrom: '.content', // use the html of the related element (class=content)
ft: ''
}
}
}
});
For a full description of this behavior see the Popup Documentation Page.