Как сделать такие модальные окна?

Question

[J. Snow]

Всем привет!
Нужно сделать модальные окна с затемнением фона:

При открытии второго окна, первое должно уходить под затемнение:

Но так же должна быть возможность настройки поведения.
Например, в некоторых случаях нужно открыть второе окно, не затемняя первое:

Или например, временно скрыть первое окно при открытии второго:

Таких модальных окон может быть сколь угодно много.

В коде их должно быть можно использовать в любом компоненте, на любом уровне вложенности.

Что скажете?))

Comments

[Aetae]

Мужик, это целая либа по работе с модальными окнами.
Там куча подводных камней, мелочей которые надо учесть, и вообще всякой кроссбраузерной ереси.

Погугли готовые решения и почитай доки, возможно какая-то либа позволяет все три варианта поведения. Если нет - возьми одну, понравившуюся, за основу и допили.

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

[J. Snow]

Aetae, надо самомУ придумать решение)

Answer 1

[TheSnegok]

Сделать setState для каждого окна и в зависимости от выбора ставить затемнение или нет и передавать каждый setState через пропсы вверх?

Comments

[J. Snow]

TheSnegok Не очень понял о чём речь. Можно подробнее?

[TheSnegok]

J. Snow, тык тут описано про хук состояния, для каждого модального окна создаёшь компоненту с таким хуком, и кидаешь через props вызов функции которая бы при каждом вызове изменяла состоянии, и при каком-то действии вызываешь его, и если хук состояния true тогда эта функция меняет класс заднего фона на затемнение, если false тогда не меняет.
Функция будет такой:

let toggleState = () => {
if(state === true) {
setState(false);
} else {
setState(true);
}
}