Parts UI - Components / Popups

.parts-popup
__container
__content

Block for pop-up windows and wrapper elements.

Put at the very end of the page, before the closing </body> tag, the following structure:

<div class="parts-popup">
  <div class="parts-popup__container">
    <div class="parts-popup__content">
      ...
    </div>
  </div>
</div>

Copied

All pop-ups used on the page will be located inside .parts-popup__content

__item    768px
    --lg    1024px
    --md    598px
    --sm    320px

Popup element & size modifiers

Popup open

.js-popup-open

JS required

The class for the element, that when clicked then the popup will be shown

data-popup-target

Attribute pointing to a specific .parts-popup__item element which should be shown on click

Examples

<button class="js-popup-open" data-popup-target="#popUpItem-1">Popup link 1</button>

<button class="js-popup-open" data-popup-target="#popUpItem-2">Popup link 2</button>

Copied

<div class="parts-popup">
  <div class="parts-popup__body">
    <div class="parts-popup__container">

      <div class="parts-popup__item" id="popUpItem-1">
        ...
      </div>

      <div class="parts-popup__item" id="popUpItem-2">
        ...
      </div>

    </div>
  </div>
</div>

Copied

The project is being tested and under development

If you find a mistake or have ideas for the development of the project - send a message