# Popups

To implement the popup, use the following markup. It corresponds accessibility requirements. To set Popup styles use the `.lib-popup()` mixin.

The `.lib-window-overlay()` mixin controls the styles of overlay background.

## Simple popup

<button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button> <div class="window popup popup-example" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true"> <div class="popup actions"> <div class="secondary"> <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button> </div> </div> <div class="popup header"> <strong class="title" id="popup-title"><span>Popup title</span></strong> </div> <div class="popup content" id="popup-content"> <p>Popup content</p> </div> <div class="popup footer"></div> </div>

## Popup with actions toolbar

<button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button> <div class="window popup popup-example-1" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true"> <div class="popup actions"> <div class="secondary"> <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button> </div> </div> <div class="popup header"> <strong class="title"><span>Popup title</span></strong> </div> <div class="popup content"> <p>Popup content</p> </div> <div class="popup footer"> <div class="actions toolbar"> <div class="primary"> <button type="submit" class="action submit"><span>Primary Action</span></button> </div> <div class="secondary"> <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button> </div> </div> </div> </div>

    .window.popup.popup-example {
        .lib-popup();
    }

    .window.popup.popup-example-1 {
        .lib-popup();
    }

    .window.overlay {
        .lib-window-overlay();
    }

# Popup variables

            Mixin variable
            Global variable
            Default value
            Allowed values
            Comment

            @_popup-width
            @popup__width
            auto
            '' | false | value
            Popup width

            @_popup-height
            @popup__height
            auto
            '' | false | value
            Popup height

            @_popup-padding
            @popup__padding
            22px
            '' | false | value
            Inner popup padding

            @_popup-background
            @popup__background
            @color-white
            '' | false | value
            Popup background

            @_popup-border
            @popup__border
            1px solid #aeaeae
            '' | false | value
            Popup border

            @_popup-shadow
            @popup__shadow
            0 3px 3px rgba(0,0,0,.15)
            '' | false | none | value
            Popup shadow

            @_popup-fade
            @popup__fade
            opacity .3s linear
            '' | false | value
            Popup overlay opacity

            @_popup-z-index
            @popup__z-index
            1001
            '' | false | value
            Popup z-index

            Popup position

            @_popup-position
            @popup__position
            fixed
            '' | false | value
            Popup position

            @_popup-position-top
            @popup__position-top
            0
            '' | false | value
            Popup top

            @_popup-position-right
            @popup__position-right
            0
            '' | false | value
            Popup right

            @_popup-position-bottom
            @popup__position-bottom
            0
            '' | false | value
            Popup bottom

            @_popup-position-left
            @popup__position-left
            0
            '' | false | value
            Popup left

            Popup margin

            @_popup-margin-top
            @popup__margin-top
            false
            '' | false | value
            Popup top margin

            @_popup-margin-right
            @popup__margin-right
            false
            '' | false | value
            Popup right margin

            @_popup-margin-bottom
            @popup__margin-bottom
            false
            '' | false | value
            Popup bottom margin

            @_popup-margin-left
            @popup__margin-left
            false
            '' | false | value
            Popup left margin

            @_popup-content-height
            @popup-content__height
            auto
            '' | false | value
            Popup content height

            @_popup-header-margin
            @popup-header__margin
            0 0 25px
            '' | false | value
            Popup header margin

            @_popup-content-margin
            @popup-content__margin
            false
            '' | false | value
            Popup content margin

            @_popup-footer-margin
            @popup-footer__margin
            false
            '' | false | value
            Popup footer margin

            @_popup-title-headings
            @popup-title-headings
            true
            true | false
            Popup title has the same style as one of page headings

            @_popup-title-headings-level
            @popup-title-headings__level
            h3
            h1 | h2 | h3 | h4 | h5 | h6
            What heading style is applyed to the popup title

            Popup close button

            @_popup-button-close-icon
            @popup-button-close__icon
            true
            true | false
            Popup close button has an icon

            @_popup-button-close-reset
            @popup-button-close__reset
            true
            true | false
            Reset popup close button default styles

            @_popup-button-close-position
            @popup-button-close__position
            absolute
            '' | false | value
            Popup button close position

            @_popup-button-close-position-top
            @popup-button-close__position-top
            10px
            '' | false | value
            Popup button close top position

            @_popup-button-close-position-right
            @popup-button-close__position-right
            10px
            '' | false | value
            Popup button close right position

            @_popup-button-close-position-bottom
            @popup-button-close__position-bottom
            ''
            '' | false | value
            Popup button close bottom position

            @_popup-button-close-position-left
            @popup-button-close__position-left
            ''
            '' | false | value
            Popup button close left position

            Popup icons parameters

            @_popup-icon-font-content
            @popup-icon-font__content
            @icon-remove
            '' | false | value
            Popup icon code

            @_popup-icon-font
            @popup-icon-font
            @button-icon__font
            '' | false | value
            Popup icon font

            @_popup-icon-font-size
            @popup-icon-font__size
            @button-icon__font-size
            '' | false | value
            Popup icon font size

            @_popup-icon-font-line-height
            @popup-icon-font__line-height
            @button-icon__line-height
            '' | false | value
            Popup icon line height

            @_popup-icon-font-color
            @popup-icon-font__color
            @button-icon__color
            '' | false | value
            Popup icon color

            @_popup-icon-font-color-hover
            @popup-icon-font__color-hover
            @button-icon__hover__font-color
            '' | false | value
            Hovered popup icon color

            @_popup-icon-font-color-active
            @popup-icon-font__color-active
            @popup-icon-font__color-active
            '' | false | value
            Active popup icon color

            @_popup-icon-font-margin
            @popup-icon-font__margin
            @button-icon__margin
            '' | false | value
            Popup icon  margin

            @_popup-icon-font-vertical-align
            @popup-icon-font__vertical-align
            @button-icon__vertical-align
            '' | false | value
            Popup icon vertical align

            @_popup-icon-font-position
            @popup-icon-font__position
            @button-icon__position
            '' | false | value
            Popup icon position

            @_popup-icon-font-text-hide
            @popup-icon-font__text-hide
            true
            true | false
            Popup icon hide text

            Actions toolbar parameters

            @_popup-actions-toolbar
            @popup-actions-toolbar
            false
            true | false
            Actions toolbar is displayed

            @_popup-actions-toolbar-actions-position
            @popup-actions-toolbar-actions__position
            @actions-toolbar-actions__position
            justify | left | right | center
            Actions toolbar position

            @_popup-actions-toolbar-actions-reverse
            @popup-actions-toolbar-actions__reverse
            @actions-toolbar-actions__reverse
            true | false
            Actions toolbar reverse

            @_popup-actions-toolbar-margin
            @popup-actions-toolbar__margin
            @actions-toolbar__margin
            '' | false | value
            Actions toolbar margin

            @_popup-actions-toolbar-padding
            @popup-actions-toolbar__padding
            @actions-toolbar__padding
            '' | false | value
            Actions toolbar padding

            @_popup-actions-toolbar-actions-margin
            @popup-actions-toolbar-actions__margin
            @actions-toolbar-actions__margin
            '' | false | value
            Actions toolbar actions margin

            @_popup-actions-toolbar-primary-actions-margin
            @popup-actions-toolbar-actions-primary__margin
            @actions-toolbar-actions-primary__margin
            '' | false | value
            Actions toolbar primary actions margin

            @_popup-actions-toolbar-secondary-actions-margin
            @popup-actions-toolbar-actions-secondary__margin
            @actions-toolbar-actions-secondary__margin
            '' | false | value
            Actions toolbar secondary actions margin

            @_popup-actions-toolbar-actions-links-margin-top
            @popup-actions-toolbar-actions-links__margin-top
            @actions-toolbar-actions-links__margin-top
            '' | false | value
            Actions toolbar links top margin

            @_popup-actions-toolbar-primary-actions-links-margin-top
            @popup-actions-toolbar-actions-links-primary__margin-top
            @actions-toolbar-actions-links-primary__margin-top
            '' | false | value
            Actions toolbar primary actions links top margin

            @_popup-actions-toolbar-secondary-links-margin-top
            @popup-actions-toolbar-actions-links-secondary__margin-top
            @actions-toolbar-actions-links-secondary__margin-top
            '' | false | value
            Actions toolbar secondary links top margin

# Window overlay mixin variables

            Mixin variable
            Global variable
            Default value
            Allowed values
            Comment

            @_overlay-background
            @overlay__background
            #000
            '' | false | value
            Overlay background color

            @_overlay-opacity
            @overlay__opacity
            .5
            '' | false | value
            Overlay opacity

            @_overlay-opacity-old
            @overlay__opacity-old
            50
            '' | false | value
            Overlay opacity for old browsers

            @_overlay-fade
            @overlay__fade
            opacity .15s linear
            '' | false | value
            Overlay fade

            @_overlay-z-index
            @overlay__z-index
            1000
            '' | value
            Overlay z-index

# Fixed height popup

To get a fixed height popup set the desired value for `@_popup-height` variable:

<button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button> <div class="window popup popup-example-2" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true"> <div class="popup actions"> <div class="secondary"> <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button> </div> </div> <div class="popup header"> <strong class="title" id="popup-title"><span>Popup title</span></strong> </div> <div class="popup content" id="popup-content"> <p>Popup content Popup contentPopup content Popup contentPopup content Popup contentPopup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup content</p> </div> <div class="popup footer"></div> </div>

    .window.popup.popup-example-2 {
        .lib-popup(
            @_popup-height: 200px
        );
    }

# Fixed content height popup

To get a fixed height popup content set the desired value for `@_popup-content-height` variable:

<button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button> <div class="window popup popup-example-3" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true"> <div class="popup actions"> <div class="secondary"> <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button> </div> </div> <div class="popup header"> <strong class="title" id="popup-title"><span>Popup title</span></strong> </div> <div class="popup content" id="popup-content"> <p>Popup content Popup contentPopupPopup content Popup contentPopupPopup content Popup contentPopupPopup content Popup contentPopupPopup content Popup contentPopup Popup content Popup contentPopup Popup content Popup contentPopup Popup content Popup contentPopup Popup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup contentPopup content Popup content</p> </div> <div class="popup footer"></div> </div>

    .window.popup.popup-example-3 {
        .lib-popup(
            @_popup-content-height: 200px
        );
    }

# Margins for header, content and footer block in popup

To set margins to header, content and footer block in popup, use variables:

      @_popup-header-margin: value,
      @_popup-content-margin: value,
      @_popup-footer-margin: value

<button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button> <div class="window popup popup-example-4" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true"> <div class="popup actions"> <div class="secondary"> <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button> </div> </div> <div class="popup header"> <strong class="title" id="popup-title"><span>Popup title</span></strong> </div> <div class="popup content" id="popup-content"> <p>Popup content</p> </div> <div class="popup footer"> <div class="actions toolbar"> <div class="primary"> <button type="submit" class="action submit"><span>Primary Action</span></button> </div> <div class="secondary"> <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button> </div> </div> </div> </div>

    .window.popup.popup-example-4 {
        .lib-popup(
            @_popup-header-margin: 0 0 25px,
            @_popup-content-margin: 0 0 20px,
            @_popup-footer-margin: 0 20px
        );
    }

# Popup titles styled as theme headings

To enable inheritance of the page heading style for popup title set:

      @_popup-title-headings: true

To set the page heading to inherit use:

      @_popup-title-headings-level: h3 // h1, h2, h3, h4, h5, h6

<button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button> <div class="window popup popup-example-5" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true"> <div class="popup actions"> <div class="secondary"> <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button> </div> </div> <div class="popup header"> <strong class="title" id="popup-title"><span>Popup title</span></strong> </div> <div class="popup content" id="popup-content"> <p>Popup content</p> </div> <div class="popup footer"> <div class="actions toolbar"> <div class="primary"> <button type="submit" class="action submit"><span>Primary Action</span></button> </div> <div class="secondary"> <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button> </div> </div> </div> </div>

    .window.popup.popup-example-5 {
        .lib-popup(
            @_popup-title-headings: true,
            @_popup-title-headings-level: h1
        );
    }

# Popup action toolbar

The `.lib-popup()` mixin uses the same variables as `.actions-toolbar()`, but with `'@_popup-'` prefix added.

To use variables from the `.actions-toolbar()` mixin set:

      @_popup-actions-toolbar: true // false

More information about parameters you will find at Actions-toolbar page.

<button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button> <div class="window popup popup-example-6" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true"> <div class="popup actions"> <div class="secondary"> <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button> </div> </div> <div class="popup header"> <strong class="title" id="popup-title"><span>Popup title</span></strong> </div> <div class="popup content" id="popup-content"> <p>Popup content</p> </div> <div class="popup footer"> <div class="actions toolbar"> <div class="primary"> <button type="submit" class="action submit"><span>Primary Action</span></button> </div> <div class="secondary"> <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button> </div> </div> </div> </div>

    .window.popup.popup-example-6 {
        .lib-popup(
            @_popup-actions-toolbar: true,
            @_popup-actions-toolbar-actions-position: left,
            @_popup-actions-toolbar-actions-reverse: true
        );
    }

# Popup Close button without an icon

You can set the popup close button to inherit theme's default button styles without an icon.

        @_popup-button-close-icon: false,
        @_popup-button-close-reset: false

<button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button> <div class="window popup popup-example-7" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true"> <div class="popup actions"> <div class="secondary"> <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button> </div> </div> <div class="popup header"> <strong class="title" id="popup-title"><span>Popup title</span></strong> </div> <div class="popup content" id="popup-content"> <p>Popup content</p> </div> <div class="popup footer"> <div class="actions toolbar"> <div class="primary"> <button type="submit" class="action submit"><span>Primary Action</span></button> </div> <div class="secondary"> <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button> </div> </div> </div> </div>

    .window.popup.popup-example-7 {
        .lib-popup(
            @_popup-button-close-icon: false,
            @_popup-button-close-reset: false
        );
    }

# Modify the icon of popup Close button

The `.lib-popup()` mixin uses all the same variables as `.icon-font()` mixin with `'@_popup-'` prefix added. More information about `.lib-icon-font()` parameters you can find at Icons page

<button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button> <div class="window popup popup-example-8" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true"> <div class="popup actions"> <div class="secondary"> <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button> </div> </div> <div class="popup header"> <strong class="title" id="popup-title"><span>Popup title</span></strong> </div> <div class="popup content" id="popup-content"> <p>Popup content</p> </div> <div class="popup footer"> <div class="actions toolbar"> <div class="primary"> <button type="submit" class="action submit"><span>Primary Action</span></button> </div> <div class="secondary"> <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button> </div> </div> </div> </div>

    .window.popup.popup-example-8 {
        .lib-popup(
            @_popup-icon-font-content: @icon-arrow-up,
            @_popup-icon-font-color: #f00,
            @_popup-icon-font-color-hover: #090,
            @_popup-icon-font-color-active: #00f,
            @_popup-icon-font-size: 30px,
            @_popup-icon-font-vertical-align: middle,
            @_popup-icon-font-text-hide: false
        );
    }

# Modify overlay styles

To modify overlay styles use the `.lib-window-overlay()` mixin

<button type="button" class="action toggle" data-toggle="popup" data-backdrop="true" data-target="#window-popup" aria-expanded="false" aria-controls="window-popup"><span>Show popup</span></button> <div class="window popup popup-example-9" id="window-popup" tabindex="-1" role="dialog" aria-labelledby="popup-title" aria-describedby="popup-content" aria-hidden="true"> <div class="popup actions"> <div class="secondary"> <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button> </div> </div> <div class="popup header"> <strong class="title" id="popup-title"><span>Popup title</span></strong> </div> <div class="popup content" id="popup-content"> <p>Popup content</p> </div> <div class="popup footer"> <div class="actions toolbar"> <div class="primary"> <button type="submit" class="action submit"><span>Primary Action</span></button> </div> <div class="secondary"> <button type="button" class="action close" data-dismiss="popup"><span>Close</span></button> </div> </div> </div> </div> <div class="window overlay example-overlay-1 active"></div>

    .window.popup.popup-example-9 {
        .lib-popup();
    }

    .window.overlay.example-overlay-1.active {
        .lib-window-overlay(
            @_overlay-background: #0f5293,
            @_overlay-opacity: .8,
            @_overlay-opacity-old: 80
        );
    }