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.

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

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

    
      
        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

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

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

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

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

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

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

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

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

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

Popups

Simple popup

Popup with actions toolbar

Popup variables

Window overlay mixin variables

Fixed height popup

Fixed content height popup

Margins for header, content and footer block in popup

Popup titles styled as theme headings

Popup action toolbar

Popup Close button without an icon

Modify the icon of popup Close button

Modify overlay styles