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

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

HTML

<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

Javascript

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