ProtoPopup

A library for info, alert, confirm-like and dialog popups based on Prototype and Scriptaculous

Intro

ProtoPopup provides methods to create fixed-positioned, yet draggable popup boxes remembering their position across showing/hiding. Each box contains three sections - header, body and footer - which can be separately filled with content.

ProtoPopup comes in four flavors

a buttonless info box (hidden via ESC) implemented in the ProtoPopup base class
an alert-like info box with a 'Close' button implemented in ProtoPopup.Alert
a confirm-like prompt with 'OK' and 'Cancel' buttons implemented in ProtoPopup.Confirm
a dialog with arbitrary buttons implemented in ProtoPopup.Dialog

While the button-less info boxes may receive content in any/all of their three sections, the footer of the alert, confirm and dialog flavors is reserved for the corresponding buttons.

Append Mode

Within this limit, the three sections can be separately switched to append mode, each call to the popup's setHtml() method appending its argument's to the specified section instead of replacing the previous content.

Header preservation across multiple calls

This way, a header set on popup creation time is preserved across multiple calls to setHtml() which each time can set a different body.

Freely stylable

The popups are freely stylable, the overall popup, each of its sections and the buttons having IDs generated from the popups ID. If the popup has been created with the ID 'info', the popup's DIVs will have the class and id attributes as shown in the following

Example

    <div id="info" class="proto-popup">
       <div id="info-header" class="proto-popup-header"><!-- header content --></div>
       <div id="info-body" class="proto-popup-body"><!-- body content --></div>
       <div id="info-footer" class="proto-popup-footer"><!-- footer content --></div>
    </div>