react+Antd modal box mask layer coverage adjustment

The original appearance is that the mask layer directly covers the whole world.

 Modified coverage of mask layer

The main thing is to modify the mounting point of the pop-up window (resetting the model style, it seems that no bugs were found, because the default is to mount it under the body, just set a wave of relative positioning for the body)

// 先全局把它原本的样式干掉

.ant-modal-mask,
.ant-modal-wrap {
    position: absolute !important;
}

Then set the mount point of the model
 and set the model properties: getContainer: document.querySelector("Your display area, that is, content").
This content must be set to relative positioning. This model will have a reference object.

Guess you like

Origin blog.csdn.net/zq18877149886/article/details/130428965