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