# domv-popup

> 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, etc)

Latest version **1.0.0** (published 2015-03-18) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install domv-popup
pnpm add domv-popup
yarn add domv-popup
bun add domv-popup
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2015-03-18 |
| First published | 2015-03-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Joris van der Wel |
| Maintainers | joris-van-der-wel |
| Keywords | domv, popup, css, z-index, stacking, context, dom, browser, browserify |

## Links

- npm: https://www.npmjs.com/package/domv-popup
- Repository: https://github.com/Joris-van-der-Wel/domv-popup
- Issues: https://github.com/Joris-van-der-Wel/domv-popup/issues
- npm.io page: https://npm.io/package/domv-popup

## Dependencies (4)

- [domv](https://npm.io/package/domv.md) ^1.0.1
- [shortid](https://npm.io/package/shortid.md) ^2.2.1
- [inherits](https://npm.io/package/inherits.md) ^2.0.1
- [lazy-timer](https://npm.io/package/lazy-timer.md) 0.0.0

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2015-03-18

## README

domv-popup
==========
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](http://browserify.org/).

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:

```javascript
var domv = require('domv');
var Popup = require('domv-popup');
var doc = domv.wrap(document);
var myButton = doc.selector('#myButton');
var myPopup;
var myPopupVisible = false;

// Toggle button to open/close the popup
myButton.on('click', function(e)
{
    if (myPopupVisible)
    {
        // hide the popup
        myPopupVisible = false;

        // by removing it from the document
        myPopup.removeNode();
    }
    else
    {
        // show the popup
        myPopupVisible = true;

        if (!myPopup)
        {
            // myButton is the owner of this Popup
            myPopup = Popup.get(myButton);
            myPopup.addClass('myPopup');
            myPopup.textContent = 'This is a popup!';

            // The top side of the popup is aligned the bottom side of the button
            myPopup.alignTop = Popup.ALIGNMENT.BOTTOM;

            // The left side of the popup is aligned the left side of the button
            myPopup.alignLeft = Popup.ALIGNMENT.LEFT;

            // The right side of the popup is aligned the right side of the button
            myPopup.alignRight = Popup.ALIGNMENT.RIGHT;
        }

        // Add the popup back to the document after it has been previously removed
        myPopup.addToAncestorOfOwner();

        // Immediately update the position
        myPopup.updatePositionNow();

        // Automatically update the position as needed
        // If the popup is removed from the document, the automatic updating stops
        myPopup.autoUpdatePosition();
    }
});

```

---
_Source: https://npm.io/package/domv-popup · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._