покажите модальную маску antd в некотором div

Question

Обычно, когда вы открываете модал, маска, то есть черный фон за модалом, занимает весь экран. Как я могу добиться, если я хочу отрисовать черный диалог в некотором div, как на изображении ниже? (красный div говорит) Я использую antd модальный.

введите описание изображения здесь

Answer 1

Обычно модальный тип прикрепляется к телу документа. (Это тег <body\>.) Однако это поведение можно изменить с помощью атрибута getContainer. См. документацию .

Следующая проблема заключается в том, что модальное (и маска - или «черный фон») положение «фиксировано», что означает, что оно зафиксировано наокно браузера. Вместо этого нам нужно изменить это положение на «абсолютное», чтобы оно было относительно div, к которому мы хотим его подключить.

См. Рабочий пример:

https://codesandbox.io/s/c9e5af93-09f2-421d-a8c1-3bbfeb1416fe-olcqd

Answer 2

Это невозможно с помощью antd.

Ant Design монтирует модалы в отдельную часть DOM, вне основного дерева DOM React, аналогично React Portal. Это стандартный способ обработки модалов, лайтбоксов и т. Д.

См. Здесь

Вы должны реализовать собственное наложение, которое абсолютно ограничено его родительским контейнером.