---
description: Компонент-обёртка для создания всплывающих элементов.
tags: modals
---

<Overview group="utils">

# PopoutWrapper [tag:component]

Компонент-обёртка для создания всплывающих элементов. Отвечает за стратегию позиционирования элементов и подложку.
Является базовым компонентом в `Alert`, `ActionSheet` и `ScreenSpinner`.

</Overview>

<Playground hide>

```jsx
<PopoutWrapper onClick={() => {}} noBackground>
  <Card>
    <Box padding="system">
      <Title>Всплывающее окно</Title>
      <Text>Содержимое всплывающего окна</Text>
    </Box>
  </Card>
</PopoutWrapper>
```

</Playground>

{/* @example-description: Базовый сценарий `PopoutWrapper` с открытием/закрытием и блокировкой прокрутки страницы. */}
<Playground>

```jsx
const [isOpen, setIsOpen] = React.useState(false);

// Для улучшения UX, при открытии всплывающего окна, стоит блокировать прокрутку страницы.
// Иначе у пользователя может быть две прокрутки: одна на всплывающем окне, вторая за ним.
useScrollLock(isOpen);

return (
  <>
    <Button onClick={() => setIsOpen(true)}>Открыть окно</Button>
    {isOpen && (
      <PopoutWrapper onClick={() => setIsOpen(false)}>
        <Card>
          <Box padding="system">
            <Title>Всплывающее окно</Title>
            <Text>Содержимое всплывающего окна</Text>
          </Box>
        </Card>
      </PopoutWrapper>
    )}
  </>
);
```

</Playground>

## Позиционирование

### Стратегия позиционирования

Свойство `strategy` определяет, как будет позиционироваться всплывающий элемент:

- `"fixed"` — контейнеру задаётся стиль `position: fixed` (по умолчанию);
- `"absolute"` — контейнеру задаётся стиль `position: absolute`;
- `"none"` — у контейнера не выставляется `position`.

### Горизонтальное выравнивание

Свойство `alignX` определяет выравнивание контента по горизонтали:

- `"center"` — контент выравнивается по центру (по умолчанию);
- `"left"` — контент выравнивается по левому краю;
- `"right"` — контент выравнивается по правому краю.

### Вертикальное выравнивание

Свойство `alignY` определяет выравнивание контента по вертикали:

- `"center"` — контент выравнивается по центру (по умолчанию);
- `"top"` — контент выравнивается по верхнему краю;
- `"bottom"` — контент выравнивается по нижнему краю.

### z-index

Свойство `zIndex` позволяет управлять порядком наложения элементов. Можно задать числовое или строковое значение (токен):

```jsx
// Установка z-index через токен
<PopoutWrapper zIndex="var(--vkui--z_index_popout)">
  <div>Контент</div>
</PopoutWrapper>

// Установка z-index числом
<PopoutWrapper zIndex={100}>
  <div>Контент</div>
</PopoutWrapper>
```

## Внешний вид

### Подложка

По умолчанию компонент создаёт полупрозрачную подложку. Её можно отключить с помощью свойства `noBackground`:

```jsx
// Подложка отключена
<PopoutWrapper noBackground>
  <div>Контент</div>
</PopoutWrapper>
```

Также компонент поддерживает анимацию плавного исчезновения подложки через свойство `closing`:

```jsx
// Подложка будет исчезать с анимацией
<PopoutWrapper closing>
  <div>Контент</div>
</PopoutWrapper>
```

## Полоса прокрутки

Чаще всего подобные всплывающие окна требуют блокировки полосы прокрутки всей страницы.
Для этого используйте хук [`useScrollLock`](/components/use-scroll-lock):

```jsx
const [isOpen, setIsOpen] = React.useState(false);

// Для улучшения UX, при открытии всплывающего окна, стоит блокировать прокрутку страницы.
// Иначе у пользователя может быть две прокрутки: одна на всплывающем окне, вторая за ним.
useScrollLock(isOpen);

return (
  <>
    <Button onClick={() => setIsOpen(true)}>Открыть окно</Button>
    {isOpen && (
      <PopoutWrapper onClick={() => setIsOpen(false)}>
        <div>
          <h2>Всплывающее окно</h2>
          <p>Содержимое всплывающего окна</p>
        </div>
      </PopoutWrapper>
    )}
  </>
);
```

## Обработчики событий

Компонент позволяет обрабатывать нажатия по подложке через свойство `onClick`:

```jsx
const handleClick = () => {
  // Закрыть всплывающий элемент
};

<PopoutWrapper onClick={handleClick}>
  <div>Контент</div>
</PopoutWrapper>;
```

## Свойства и методы [#api]

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `alignX` | `"center" \| "right" \| "left"` | `center` | Выравнивает контент по горизонтали. |
| `alignY` | `"center" \| "top" \| "bottom"` | `center` | Выравнивает контент по вертикали. |
| `closing` | `boolean` | `false` | Спрячет компонент через fade-out анимацию. |
| `getRootRef` | `Ref<HTMLDivElement>` | `-` |  |
| `noBackground` | `boolean` | `false` | Позволяет сделать прозрачную подложку. |
| `strategy` | `"none" \| "absolute" \| "fixed"` | `fixed` | Стратегия позиционирования:  - `fixed`: у контейнера выставлен `position: fixed` - `absolute`: у контейнера выставлен `position: absolute` - `none`: у контейнера не выставлен `position`. |
| `zIndex` | `string \| number` | `var(--vkui--z_index_popout)` | Позволяет задать z-index через токен или числом. |