hypejunction/ui_popup

Popup AMD module for Elgg

Popups for Elgg

, _(*1)

Features

• Coverts popups into an AMD module
• Allows to programmically open and close popups
• Allows passing popup position via data- parameters of the trigger

Usage

Bind by href attribute

This behaviour is identical to adding rel="popup" to your anchor element., _(*2)

echo elgg_view('output/url', array(
    'class' => 'popup-trigger',
    'href' => '#popup',
));

define(function(require) {
    var $ = require('jquery');
    var popup = require('elgg/popup');
    popup.bind($('.popup-trigger'));
});

Custom elements

echo elgg_format_element('button', [
    'class' => 'elgg-button elgg-button-popup',
    'data-my' => 'center top',
    'data-at' => 'center bottom+10px',
], 'Open Popup');
echo elgg_format_element('div', [
    'class' => 'elgg-module elgg-module-popup hidden',
], 'My popup');

define(function(require) {
    var $ = require('jquery');
    $(document).on('click', '.elgg-button-popup', function(e) {
        e.preventDefault();
        var $trigger = $(this);
        var $target = $(this).next('.elgg-module-popup');
        if ($target.length) {
            require(['elgg/popup'], function(popup) {
                popup.open($trigger, $target, {
                    'collision': 'fit none'
                });
            });
        }
    });
});