How to have the same transparency mask on every ant design modal?

Question

{filteredBookings.map((booking, index) => (
                    <Modal
                        key={index} // Make sure to provide a unique key
                        open={detailModalVisible}
                        onCancel={(e) => {
                            setDetailModalVisible(false);
                            setCurrentBookingIndex(null);
                        }}
                        footer={null}>
                        <EachBooking
                            key={currentBookingIndex} // Ensure EachBooking components have unique keys
                            selectedBooking={selectedBooking}
                            roomId={selectedRoomId}
                            roomName={selectedRoomName}
                            username={username}
                            toPreviousMainModal={toPreviousMainModal}
                        />
                    </Modal>
                ))}

I have submodal in <EachBooking /> that will open when click on main modal.

when I inspect the antd custom class antd-modal-mask it has rgba(0, 0, 0, 0.45) which is their default. But I don't see that property in submodal, and the mask appears to be darker like it doubles or overlap 0.45. I want the same alpha 0.45 mask on every modal. How can I do that?

Answer 1

Because you are mapping a modal. This will cause several modals to appear which will overlay on one other. Remove the mapping and it will work.

Answer 2

You can use createPortal to render a modal with a portal. This way the you can hide the parent modal without hiding the child.