API REFERENCE · OVERLAYS
<dj-popup>
Positions slotted content as an overlay, flipping to the opposite side when there isn't room in the preferred position. Anchor it by setting the anchor property to an element, or supply viewport coordinates via the x-*/y-* attributes.
While open it locks body scroll and closes on Escape or underlay click, emitting a dj-close event. Content goes in the default slot.
npm install @dojo-ng/popup
import "@dojo-ng/popup";Properties
| Property | Attribute | Type | Default |
|---|---|---|---|
open |
open reflected |
boolean |
false |
position |
position reflected |
"above""below""left""right" |
"below" |
underlayVisible |
underlay-visible reflected |
boolean |
false |
scrollLockLock body scroll while open (default true). Dropdowns set this false. |
scroll-lock |
boolean |
true |
yTopViewport-coordinate fallbacks used when no anchor element is set. |
y-top |
number |
0 |
yBottom |
y-bottom |
number |
0 |
xLeft |
x-left |
number |
0 |
xRight |
x-right |
number |
0 |
Events
dj-close
Slots
Default slot
CSS parts
Style these with dj-popup::part(name).
underlaywrapperlayer
CSS custom properties
| Property | Default | Description |
|---|---|---|
--dj-popup-z-index | 901 | Stacking order of the popup. |
--dj-popup-underlay-z-index | 900 | Stacking order of the popup underlay. |
Methods
| Method | Description |
|---|---|
close() | Close the popup and emit dj-close. |