--- name: popup url: /popup title: Popup ---

Popup

A window that has content and can be placed anywhere, like a popup. Trigger it when a view is loaded or from a button click.


Basic HTML

You can create popup with this basic directive

Open Popup
Open Popup

If the girl you love moves in with another guy once, it's more than enough. Twice, it's much too much. Three times, it's the story of your life.


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 popups.