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
    );
}