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

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

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

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

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:

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

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

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

.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

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