Блог

Главная - Вопросы по программированию - Реакция — расположение всплывающего окна поверх другого всплывающего окна

Реакция — расположение всплывающего окна поверх другого всплывающего окна

#css #reactjs

#css #reactjs

Вопрос:

Я пытаюсь открыть всплывающее окно подтверждения поверх другого всплывающего окна (используя carbon modal), но оно расположено относительно, и часть соответствия скрыта:

Песочница

Я попытался решить это с помощью css:

 .container {
    /*position: relative;*/
    /*display: inline-block;*/
    position: relative !important;
    left: 0;
    top: 0;
}

.on-top {
    /*z-index: 10000;*/
    position: absolute !important;
    left: 0;
    top: 0;
    /*top: 50%;*/
    /*left: 50%;*/
}

Ответ №1:

Не отображайте их как родительско-дочерние, а как братьев и сестер. Тот, который находится в самом низу в dom, по умолчанию будет верхним. Вы можете изменить это, присвоив обоим модалам другой z-индекс, если хотите.

Комментарии:

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

2. Ссылка выше по-прежнему показывает старый код. Но да, я думаю, вы поняли идею. Я всегда делаю модальные «немые» компоненты (не содержащие собственного состояния или функций). Таким образом, вы можете создать родительский компонент, который обертывает эти 2 модальности для совместного использования состояния между ними. (Тогда вам не нужно беспокоиться о попытке исправить эту проблему с помощью css)