# 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` ), а также блокирует скролл и фокус. 
## Использование стилизованной обертки Для использования стилизованного модального окна с отступами и крестиком для закрытия, добавьте свойство  `hasBody` . 
## Подключение анимации Подключение анимации аналогично тому, как это происходит в  `PopupBase`  - через свойство  `withAnimation` (управление через  `popupBaseClasses` ,  `modalBaseClasses` ).
Для добавления анимации в оверлей необходимо использовать класс  `.modal-base-overlay`  через переменную  `modalBaseClasses.overlay`  из пакета. Пример: 
## Draggable Чтобы иметь возможность перетаскивать Modal по экрану нужно включить свойство  `draggable` . Пример: 
## Resizable Чтобы иметь возможность растягивать Popup нужно настроить свойство  `resizable` . Формат следующий: 
Пример: