Используется для обеспечения функциональности, а также для отображения справочной информации, диалоговых окон и других элементов пользовательского интерфейса. Для отображения всплывающего окна на веб-странице необходимо использовать следующую структуру кода:
<div class="shop-block-popup js-popup">
<div class="dark"></div>
<div class="popupblock">
<a onclick="return popupClose('.js-popup');" class="close" href="javascript:void(0);">
<svg viewBox="0 0 16 16">
<use xlink:href="#icon-close"/>
</svg>
</a>
<div class="window-content window-form">
<form>
<div class="block-title">
Form title
</div>
<div class="element">
<div class="el-caption">
Form-field #1
</div>
<div class="el-value">
Form-value #1
</div>
</div>
<div class="element">
<div class="el-caption">
<input type="submit" class="ob-button" value="Button">
</div>
</div>
</form>
</div>
</div>
</div>
Внутри блока с классом .window-content размещаем контент, который необходим для отображения во всплывающем окне. Ссылка с классом .close используется для закрытия окна. Класс js-popup используется для закрытия и открытия всплывающего окна, передавая соответствующий класс в функцию popupClose('.js-popup'); и popupOpen('.js-popup');.
Для отображения фиксированных кнопок (кнопок, прижатых к нижним границам страницы) внутри всплывающего окна необходимо использовать обертку .ob-button-fixed
в сочетании с дополнительным блоком .ob-button-fixed-place для резервации места на странице.
Данная конструкция будет полезна если внутри окна будет располагаться большое количество контента, с предполагаемым действием в конце. Кнопки будут всегда в области видимости, что облегчит пользование интерфейсом для пользователя.
<div class="shop-block-popup js-popup">
<div class="dark"></div>
<div class="popupblock">
<a onclick="return popupClose('.js-popup');" class="close" href="javascript:void(0);">
<svg viewBox="0 0 16 16">
<use xlink:href="#icon-close"/>
</svg>
</a>
<div class="window-content window-form">
<form>
<div class="block-title">
Form title
</div>
<div class="element">
<div class="el-caption">
Form-field #1
</div>
<div class="el-value">
Form-value #1
</div>
</div>
<div class="ob-button-fixed">
<a class="ob-button" href="#">Button</a>
<a class="ob-button button-orange" href="#">Button</a>
<a class="ob-button button-red" href="#">Button</a>
<a class="ob-button button-cancel" href="#">Button</a>
</div>
<div class="ob-button-fixed-place"></div>
</form>
</div>
</div>
</div>