Display DOM elements with fixed position (a popup) relative to an "owning" element. This is a neat workaround for stacking context limitations in CSS (z-index, overflow:hidden, et cetera)
This is a CommonJS module, you will need to use browserify.
Usage
Each Popup
instance is a simple <div>
element with fixed positioning (position:fixed
). This popup will be positioned relative to a specified owner
element. If the owner element changes position for whatever reason (window resize, scrolling, style changes by javascript, et cetera), so will the popup. The popup will also receive a max-width and max-height to prevent it from going outside the browser viewport.
Example:
var domv = require('domv');
var Popup = require('domv-popup');
var doc = domv.wrap(document);
var myButton = doc.selector('#myButton');
var myPopup;
var myPopupVisible = false;
myButton.on('click', function(e)
{
if (myPopupVisible)
{
myPopupVisible = false;
myPopup.removeNode();
}
else
{
myPopupVisible = true;
if (!myPopup)
{
myPopup = Popup.get(myButton);
myPopup.addClass('myPopup');
myPopup.textContent = 'This is a popup!';
myPopup.alignTop = Popup.ALIGNMENT.BOTTOM;
myPopup.alignLeft = Popup.ALIGNMENT.LEFT;
myPopup.alignRight = Popup.ALIGNMENT.RIGHT;
}
myPopup.addToAncestorOfOwner();
myPopup.updatePositionNow();
myPopup.autoUpdatePosition();
}
});