ProtoPopup

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

Demo

Buttonless info boxes with ProtoPopup (the base class)

The simplest case certainly is the buttonless info box having just a body section and no buttons. It can be closed by pressing ESC or by clicking on the cross icon in the upper right corner of the popup.

A simple example

The code

The first argument 'info' is the popup's id.
The second argument is the configuration object.

   new ProtoPopup('info', { body : 'Forget this info', width: '200px' }).show();

The generated popup

  <div id="info" class="proto-popup">
    <img src="img/cancel.png" class="proto-popup-cancel"/>
    <div id="info-header"     class="proto-popup-header"/>
    <div id="info-body"       class="proto-popup-body">Forget this info</div>
    <div id="info-footer"     class="proto-popup-footer"/>
  </div>

The downside of this somewhat raw usage is that each time you click the button a new ProtoPopup object having the same id is created. Moreover, when pressing ESC or clicking the cancel icon the popup is hidden, but not destroyed. Consequence: ProtoPopup DIVs keep accumulating at the bottom of the HTML body... Very bad. Also, one of the promised features – position memory across showing/hiding – is not available with this approach. Try it. Press the above button, move the popup, close it, and press the button once more: it will be again centered on the screen, instead of appearing where you closed it.

What we need, then, is a singleton, like in the following example.

Refined example using a singleton

To always use the same popup, the class method get() is what you want.

The code

   ProtoPopup.get('refined_info', {
       body : 'Forget this info',
       width: '200px'
   }).show();

In other situations you might want to have a reusable info() function handy.

Reusable info() function

Reusables function are created using the makeFunction() class method.

The code

   var info = ProtoPopup.makeFunction('reusable_info', {
       header : 'Announcement',
       width:   '200px'
    });
   info('Forget this info');
   info('Forget this info, too');

A debug popup in append mode

The code

   var debug = ProtoPopup.makeFunction('debug', {
       header     : 'Debug output',
       appendBody : true,
       width: '200px'
   });
   debug('First debug message');
   debug('More debugging');

A modal popup

The code

    ProtoPopup.get('modal', {
        body : new Element('div').update('This is a modal alert'),
        modal: true,
        width: '200px'
    }).show();

An alert popup

The code

    ProtoPopup.Alert.get('alert', {
        body : new Element('div').update('This is an alert!'),
        width: '200px',
        cancelIconSrc: false,
        closeBtnLabel: 'Kapatmak',
    }).show();

A dialog popup

The code

    var p = ProtoPopup.Dialog.get('dialog', {
        body : new Element('div')
                .update('Do you want to save the changes you made?'),
        cancelIconSrc: false,
        width: '200px',
        buttons: [
            {
                name:       'dont_save',
                label:      'Don\'t Save',
                onClick:    function() { p.hide(); alert('You clicked "Don\'t Save"') },
                giveFocus:  false,           // default
                vertical:   'after-footer',  // default
                horizontal: 'left',          // default
            },
            {
                name:     'cancel',
                label:    'Cancel',
                onClick:  function() { p.hide(); alert('You clicked "Cancel"') }
                vertical: 'after-footer'
            },
            {
                name:       'save',
                label:      'Save',
                onClick:    function() { p.hide(); alert('You clicked "Save"') },
                giveFocus:  true,
                horizontal: 'right',
                vertical:   'after-footer'
            },
        ]
    }).show();

Final note

As popups are identified via their id, you may keep around multiple popups at any one time, each having it's own object, each remembering its previous position. So you might have an info() popup, an error() popup...