Modal

The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.

The component renders its children node in front of a backdrop component. The Modal offers important features:

• 💄 Manages modal stacking when one-at-a-time just isn't enough.
• 🔐 Creates a backdrop, for disabling interaction below the modal.
• 🔐 It disables scrolling of the page content while open.
• ♿️ It properly manages focus; moving to the modal content, and keeping it there until the modal is closed.
• ♿️ Adds the appropriate ARIA roles automatically.
• 5 1 кБ в сжатом виде.

примечание по терминологии. Термин «modal» иногда используется для обозначения «dialog», но это неверно. An element is considered modal if it blocks interaction with the rest of the application. A modal window describes parts of a UI.

If you are creating a modal dialog, you probably want to use the Dialog component rather than directly using Modal. Modal - это конструкция нижнего уровня, которая используется следующими компонентами:

• Dialog
• Панель
• Menu
• Popover

Simple modal

This demo stacks Modals, but it is strongly discouraged to do so in practice.

<button type="button" onClick={handleOpen}>
  Open Modal
</button>
<Modal
  open={open}
  onClose={handleClose}
  aria-labelledby="simple-modal-title"
  aria-describedby="simple-modal-description"
>
  {body}
</Modal>

Notice that you can disable the outline (often blue or gold) with the outline: 0 CSS property.

Переходы

The open/close state of the modal can be animated with a transition component. This component should respect the following conditions:

• Be a direct child descendent of the modal.
• Have an in prop. This corresponds to the open / close state.
• Call the onEnter callback prop when the enter transition starts.
• Call the onExited callback prop when the exit transition is completed. These two callbacks allow the modal to unmount the child content when closed and fully transitioned.

Modal has built-in support for react-transition-group.

Alternatively, you can use react-spring.

Производительность

The content of modal is unmounted when closed. If you need to make the content available to search engines or render expensive component trees inside your modal while optimizing for interaction responsiveness it might be a good idea to change this default behavior by enabling the keepMounted prop:

<Modal keepMounted />

Как и при любой оптимизации производительности, эта функция не панацея. Сначала идентифицируйте узкие места и лишь затем пытайтесь применить эти стратегии.

Server-side modal

React doesn't support the createPortal() API on the server. In order to display the modal, you need to disable the portal feature with the disablePortal prop:

Ограничения

Focus trap

The modal moves the focus back to the body of the component if the focus tries to escape it.

This is done for accessibility purposes, however, it might create issues. In the event the users need to interact with another part of the page, e.g. with a chatbot window, you can disable the behavior:

<Modal disableEnforceFocus />

Доступность

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#dialog_modal)

• Be sure to add aria-labelledby="id...", referencing the modal title, to the Modal. Additionally, you may give a description of your modal with the aria-describedby="id..." prop on the Modal.

  <Modal
    aria-labelledby="modal-title"
    aria-describedby="modal-description"
    >
    <h2 id="modal-title">
      My Title
    </h2>
    <p id="modal-description">
      My Description
    </p>
    </Modal>

• The WAI-ARIA authoring practices can help you set the initial focus on the most relevant element, based on your modal content.

• Windows under a modal are inert. Keep in mind that a "modal window" overlays on either the primary window or another modal window. Keep in mind that a "modal window" overlays on either the primary window or another modal window. This might create conflicting behaviors.

API

• <Modal />