CSS для добавления эффекта «всплывающего окна» для пользовательского модала в React

Question

У меня есть страница, состоящая из компонента Main.

Main также содержит два компонента - NavBar и Body. Тело также содержит два компонента - ViewTable и AddPerson. Внутри компонента ViewTable я хочу, чтобы модал загружался при щелчке поля в таблице. У меня есть правильная функциональность, но я застрял в CSS части.

Прямо сейчас модал выглядит так -

Как мне go поступить так? Я новичок в React и структура компонентов

Answer 1

Как предполагает @ gian.gyger, реагирующий модал с реагирующей переходной группой - верный путь к go.

Но, если вы уже внедрили модальный режим с простым реагированием и хотите помочь только с CSS, это может помочь. Чтобы зафиксировать модальное положение так, чтобы оно не занимало пространство в нижнем слое, мы могли бы дать следующее

.modal-container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width:100%;
    background-color: rgba(0,0,0,0.4);  /* for darker background when modal is open*/

    /*z-index sets the modal on the higher stack above all of the others */
    z-index:10
}

.modal {
    width: 50%; /* or above or lesser */
    background: red; /* modal background color */
    margin: 20% auto;
}

Здесь я предполагаю, что элемент с классом modal-container активируется только при желаемое действие (например, нажатие кнопки) и modal-container - это пустой элемент div, который просто содержит в себе элемент modal

Ссылка: W3Schools

Answer 2

Есть хорошая библиотека реагирования, которая называется response-modal , которую я могу порекомендовать. Это немного сложно, но как только вы заставите его работать, это здорово.

Если вы хотите сделать это ванильным способом, используйте position: absolute для модального. Чтобы получить переход к работе, используйте response-transition-group , чтобы переключить прозрачность и анимировать переход. Вероятно, потребуется некоторое время, чтобы попасть в реагирующую группу, так как на первый взгляд это немного сбивает с толку.