---
name: popup
url: /popup
---
Popup
Basic HTML
You can create popup with this basic directive
Positioning
Popups use a library called Tether. Tether attaches an element to another element with absolute positioning; however, there is one caveat. If your popup is nested within a scrollable area (not `body`) but it's not the immediate parent of that element, it will lose its positioning.
Sass Mixins
Popups don't currently have any sizing classes, but you can use our mixins to style your own.
.custom-popup {
// Use this mixin to override the default styles for panels
@include popup(
$width: $popup-width, // Should be an absolute value like px or rem
$background: $popup-background, // Background color
$radius: $popup-radius, // Border radius
$shadow: $popup-shadow, // Box shadow
$border: $popup-border // Border
);
}
Sass Variables
Use these variables to customize the appearance of basic panels.
$popup-width: rem-calc(300) !default;
$popup-background: #fff !default;
$popup-border: 0 !default;
$popup-radius: 8px !default;
$popup-shadow: 0 0 10px rgba(#000, 0.25) !default;