Описание функции
- Таблица с разбивкой на страницы
- Последний столбец представляет собой столбец с закрепленными действиями ()
Код: Выделить всё
position: sticky - В каждой строке есть кнопка действия с тремя точками
- При нажатии на нее открывается всплывающее окно
- Каждая опция всплывающего окна запускает модальное, которое также запускает POST-запрос к серверная часть
Когда открывается модальное окно:
- Модальное окно появляется над всем (в Tailwind)
Код: Выделить всё
z-50 - Фоновое содержимое размыто или затемнено
- Строки таблицы должны визуально оставаться неизменными внизу
Когда я нажимаю действие в строке:
- Модальное окно открывается правильно
- НО каждая строка ниже выбранной строки получает белый фон
- Строки над выбранной строкой выглядят нормально
- Столбец прикрепленных действий уже имеет белый фон (предназначено)
- Модальное наложение: z-50
- Прикрепленный столбец действий: z-10 + белый фон
- Модальное наложение размывает фон
- Таблица построена с использованием массива конфигурации столбцов
- Каждый столбец определяет:
-
Метку заголовка - Ячейку рендерер
[*]
- Значение ячейки — ReactNode
- Этот компонент содержит:
-
Кнопка с тремя точками - Компонент Popover
- Модальная логика внутри всплывающего окна
Мое замешательство
- Модальное окно имеет более высокий z-индекс, чем прикрепленный столбец, поэтому оно правильно отображается сверху.
- Но почему все строки ниже выбранной строки получают белый фон?
- Это:
-
A проблема с контекстом стекирования? - Что-то связано с положением: липким созданием нового контекста стекирования?
- Побочный эффект модального наложения/фона?
- Проблема с перерисовкой/перекомпоновкой, вызванная тем, как смонтировано всплывающее окно/модальное окно?
Подробнее здесь: https://stackoverflow.com/questions/798 ... ening-moda
