# ModalBase Props (свойства) для компонента ModalBase: [{"name":"withBlur","type":{"name":"boolean"}},{"name":"closeOnEsc","type":{"name":"boolean"}},{"name":"closeOnOverlayClick","type":{"name":"boolean"}},{"name":"onEscKeyDown","type":{"name":"((event: KeyboardEvent) => void)"}},{"name":"onOverlayClick","type":{"name":"((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)"}},{"name":"initialFocusRef","type":{"name":"RefObject<HTMLElement>"}},{"name":"focusAfterRef","type":{"name":"RefObject<HTMLElement>"}},{"name":"onClose","type":{"name":"(() => void)"}},{"name":"view","type":{"name":"string"}},{"name":"isOpen","type":{"name":"boolean"}},{"name":"opened","type":{"name":"boolean"}},{"name":"placement","type":{"name":"enum","raw":"PopupPlacement","value":[{"value":"\"center\""},{"value":"\"top\""},{"value":"\"bottom\""},{"value":"\"right\""},{"value":"\"left\""},{"value":"\"top-right\""},{"value":"\"top-left\""},{"value":"\"bottom-right\""},{"value":"\"bottom-left\""}]}},{"name":"offset","type":{"name":"[number, number] | [string, string]"}},{"name":"frame","type":{"name":"string | RefObject<HTMLElement>"}},{"name":"children","type":{"name":"ReactNode"}},{"name":"overlay","type":{"name":"ReactNode"}},{"name":"zIndex","type":{"name":"string"}},{"name":"popupInfo","type":{"name":"PopupInfo"}},{"name":"withAnimation","type":{"name":"boolean"}},{"name":"draggable","type":{"name":"boolean"}},{"name":"resizable","type":{"name":"boolean | { disabled?: boolean; directions?: ResizeDirections; defaultSize?: { width?: number | undefined; height?: number | undefined; } | undefined; ... 6 more ...; hiddenIcons?: PopupPlacementMixed[] | undefined; } | undefined"}},{"name":"hasBody","type":{"name":"true"}},{"name":"hasClose","type":{"name":"boolean"}}] ### Использование Перед использованием убедитесь, что  `PopupBaseProvider`  подключен.
Компонент ModalBase во многом схож с PopupBase, добавляет при этом подложку( `overlay` ), а также блокирует скролл и фокус.
```tsx
import React from 'react';
import styled from 'styled-components';
import { surfaceSolid02 } from '@salutejs/plasma-tokens-web';
import { SSRProvider, Button, ModalBase, PopupBaseProvider } from '@salutejs/plasma-web';
export function App() {
const [isOpenA, setIsOpenA] = React.useState(false);
const [isOpenB, setIsOpenB] = React.useState(false);
return (
<SSRProvider>
<PopupBaseProvider>
<div style={{ height: "300px" }}>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<Button text="Открыть A" onClick={() => setIsOpenA(true)} />
</div>
<ModalBase
id="modalA"
onClose={() => setIsOpenA(false)}
opened={isOpenA}
placement="center"
offset={[0, 0]}
>
<div style={{ background: `${surfaceSolid02}`, padding: "1rem" }}>
<Button onClick={() => setIsOpenA(false)}>Close</Button>
<Button text="Открыть B" onClick={() => setIsOpenB(true)} />
Content
</div>
<ModalBase
id="modalB"
onClose={() => setIsOpenB(false)}
opened={isOpenB}
placement="right"
offset={[0, 0]}
>
<div style={{ background: `${surfaceSolid02}`, padding: "1rem" }}>
<Button onClick={() => setIsOpenB(false)}>Close</Button>
Content
</div>
</ModalBase>
</ModalBase>
</div>
</PopupBaseProvider>
</SSRProvider>
);
}
```
## Использование стилизованной обертки Для использования стилизованного модального окна с отступами и крестиком для закрытия, добавьте свойство  `hasBody` . 
```tsx
import React, { useState } from 'react';
import { SSRProvider, Button, ModalBase, PopupBaseProvider } from '@salutejs/plasma-web';
export function App() {
const [isOpenA, setIsOpenA] = useState(false);
const [isOpenB, setIsOpenB] = useState(false);
return (
<SSRProvider>
<PopupBaseProvider>
<div style={{ height: "300px" }}>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<Button text="Открыть A" onClick={() => setIsOpenA(true)} />
</div>
<ModalBase
id="modalA"
onClose={() => setIsOpenA(false)}
opened={isOpenA}
placement="center"
offset={[0, 0]}
hasBody
>
<Button onClick={() => setIsOpenA(false)}>Close</Button>
<Button text="Открыть B" onClick={() => setIsOpenB(true)} />
Content
<ModalBase
id="modalB"
onClose={() => setIsOpenB(false)}
opened={isOpenB}
placement="right"
offset={[0, 0]}
>
<Button onClick={() => setIsOpenB(false)}>Close</Button>
Content
</ModalBase>
</ModalBase>
</div>
</PopupBaseProvider>
</SSRProvider>
);
}
```
## Подключение анимации Подключение анимации аналогично тому, как это происходит в  `PopupBase`  - через свойство  `withAnimation` (управление через  `popupBaseClasses` ,  `modalBaseClasses` ).
Для добавления анимации в оверлей необходимо использовать класс  `.modal-base-overlay`  через переменную  `modalBaseClasses.overlay`  из пакета. Пример:
```tsx
const StyledModal = styled(ModalBase)`
&& > .${popupBaseClasses.root}, .${modalBaseClasses.overlay} {
animation: fadeIn 1s forwards;
}
&&.${popupBaseClasses.endAnimation} .${popupBaseClasses.root} {
animation: fadeOut 1s forwards;
}
&&.${popupBaseClasses.endAnimation} .${modalBaseClasses.overlay} {
animation: fadeOut 1s forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
`;
```
## Draggable Чтобы иметь возможность перетаскивать Modal по экрану нужно включить свойство  `draggable` . Пример: 
```tsx
import React from 'react';
import { SSRProvider, Button, ModalBase, PopupBaseProvider } from  '@salutejs/plasma-web';
export function App() {
const [isOpen, setIsOpen] = React.useState(false);
return (
<SSRProvider>
<PopupBaseProvider>
<div style={{height: "200px"}}>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<Button
style={{
marginTop: "1rem",
width: "15rem"
}}
text="Открыть"
onClick={() => setIsOpen(true)}
/>
</div>
<ModalBase
id="modal"
isOpen={isOpen}
onClose={() => setIsOpen(false)}
placement="center"
draggable
>
<div style={{ background: "lightgray", padding: "1rem", height: '100%', boxSizing: 'border-box', borderRadius: '1rem' }}>
<Button onClick={() => setIsOpen(false)}>Close</Button>
<>Content</>
</div>
</ModalBase>
</div>
</PopupBaseProvider>
</SSRProvider>
);
}
```
## Resizable Чтобы иметь возможность растягивать Popup нужно настроить свойство  `resizable` . Формат следующий: 
```tsx
/**
* Настройка resizable-режима.
*/
resizable?: {
/**
* Включение/выключение ресайза.
* @default false
*/
disabled?: boolean;
/**
* Направления для ресайза.
*/
directions?: ResizeDirections;
/**
* Начальный размер окна ресайза.
*/
defaultSize?: { width?: number; height?: number };
/**
* Минимальная ширина ресайза в px.
*/
minWidth?: number;
/**
* Минимальная высота ресайза в px.
*/
minHeight?: number;
/**
* Максимальная ширина ресайза в px.
*/
maxWidth?: number;
/**
* Максимальная высота ресайза в px.
*/
maxHeight?: number;
/**
* Кастомные иконки ресайза.
*/
icons?: {
topRight?: ReactNode;
bottomRight?: ReactNode;
bottomLeft?: ReactNode;
topLeft?: ReactNode;
};
/**
* Размер иконки ресайза.
* @default s
*/
iconSize?: 'xs' | 's' | 'm';
/**
* Скрывать ли иконку для ресайза.
* @default false
*/
hiddenIcons?: PopupPlacementMixed[];
};
```
## Resizable Чтобы иметь возможность растягивать Popup нужно настроить свойство  `resizable` . Формат следующий: ```tsx
/**
* Настройка resizable-режима.
*/
resizable?: {
/**
* Включение/выключение ресайза.
* @default false
*/
disabled?: boolean;
/**
* Направления для ресайза.
*/
directions?: ResizeDirections;
/**
* Начальный размер окна ресайза.
*/
defaultSize?: { width?: number; height?: number };
/**
* Минимальная ширина ресайза в px.
*/
minWidth?: number;
/**
* Минимальная высота ресайза в px.
*/
minHeight?: number;
/**
* Максимальная ширина ресайза в px.
*/
maxWidth?: number;
/**
* Максимальная высота ресайза в px.
*/
maxHeight?: number;
/**
* Кастомные иконки ресайза.
*/
icons?: {
topRight?: ReactNode;
bottomRight?: ReactNode;
bottomLeft?: ReactNode;
topLeft?: ReactNode;
};
/**
* Размер иконки ресайза.
* @default s
*/
iconSize?: 'xs' | 's' | 'm';
/**
* Скрывать ли иконку для ресайза.
* @default false
*/
hiddenIcons?: PopupPlacementMixed[];
};
```
Пример:
```tsx
import React from 'react';
import { SSRProvider, Button, ModalBase, PopupBaseProvider } from  '@salutejs/plasma-web';
export function App() {
const [isOpen, setIsOpen] = React.useState(false);
return (
<SSRProvider>
<PopupBaseProvider>
<div style={{height: "200px"}}>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<Button
style={{
marginTop: "1rem",
width: "15rem"
}}
text="Открыть"
onClick={() => setIsOpen(true)}
/>
</div>
<ModalBase
id="modal"
isOpen={isOpen}
onClose={() => setIsOpen(false)}
placement="center"
offset={[0, 0]}
resizable
>
<div style={{ background: "lightgray", padding: "1rem", height: '100%', boxSizing: 'border-box', borderRadius: '1rem' }}>
<Button onClick={() => setIsOpen(false)}>Close</Button>
<>Content</>
</div>
</ModalBase>
</div>
</PopupBaseProvider>
</SSRProvider>
);
}
```