hypejunction/ui_popup

Popup AMD module for Elgg

Maintainers

Package info

github.com/hypeJunction/Elgg-ui_popup

Homepage

Language:JavaScript

Type:elgg-plugin

pkg:composer/hypejunction/ui_popup

Statistics

Installs: 70

Dependents: 0

Suggesters: 0

Stars: 0

Open Issues: 0

Security

Advisories: 0

Aikido package health analysis

1.1.0 2016-04-06 21:03 UTC

Requires

GPL-2.0 6b68d3343ce08f4b94dac084842a5ee6566f5cc7

  • Ismayil Khayredinov <info.woop@hypejunction.com>

uipluginpopupelgg

This package is auto-updated.

Last update: 2026-03-01 00:21:48 UTC

README

Elgg 2.0

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.

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'
				});
			});
		}
	});
});