skip to Main Content
{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?

2

Answers


  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.

    Login or Signup to reply.
  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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search