hypejunction / ui_popup
Popup AMD module for Elgg
Installs: 70
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 2
Forks: 1
Open Issues: 0
Language:JavaScript
Type:elgg-plugin
Requires
- php: >=5.5
- composer/installers: 1.*
This package is auto-updated.
Last update: 2024-10-29 04:52:57 UTC
README
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' }); }); } }); });