Модальные окна

Когда необходимо вывести дополнительный контент, а создавать для этого отдельную страницу нет необходимости, то на помощь нам придут модальные окна.

<button class="btn" data-modal="example-modal-1">Показать модальное окно</button>
<div class="modal" data-id="example-modal-1">
    <div class="wrapper">
        <div class="modal-content">
            <div class="modal-header">Название</div>

            <div class="modal-body">
                <div>Содержимое модального окна</div>

                <div class="pt-20">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, at, aut blanditiis distinctio esse ipsam nisi odio odit pariatur quasi qui tempora, totam. Modi odio recusandae velit voluptate. Odit, quibusdam!</div>
            </div>

            <div class="modal-footer">
                <button class="btn btn-transparent" data-modal-close>Закрыть</button>
            </div>
        </div>
    </div>
</div>

Пример работы модального окна

Вы можете регулировать размер модального окна, добавляя к блоку .modal > .wrapper классы размеров .w-{NUM}-i

Управлять появлением и исчезанием модальных окон можно с помощью JS

pipui.modal.open('modal-id');
pipui.modal.close('modal-id');
pipui.modal.toggle('modal-id');