Overlay issue

[sandeepc24]

I am showing modal from a modal and the issue I have is the first modal is not greyed out when the second modal is shown, because of this I can edit the controls on first modal. I am not sure how to fix this, can you please help?

Following code shows the issue.

    Html.div [
        Daisy.button.label [
            prop.htmlFor "my-modal"
            button.primary
            prop.text "Open Modal"
        ]
        Daisy.modalToggle [prop.id "my-modal"]
        Daisy.modal.div [
            prop.children [
                Daisy.modalBox.div [
                    Html.p "Enim dolorem dolorum omnis atque necessitatibus. Consequatur aut adipisci qui iusto illo eaque. Consequatur repudiandae et. Nulla ea quasi eligendi. Saepe velit autem minima."
                    Html.p "Enim dolorem dolorum omnis atque necessitatibus. Consequatur aut adipisci qui iusto illo eaque. Consequatur repudiandae et. Nulla ea quasi eligendi. Saepe velit autem minima."
                    Html.p "Enim dolorem dolorum omnis atque necessitatibus. Consequatur aut adipisci qui iusto illo eaque. Consequatur repudiandae et. Nulla ea quasi eligendi. Saepe velit autem minima."
                    Html.p "Enim dolorem dolorum omnis atque necessitatibus. Consequatur aut adipisci qui iusto illo eaque. Consequatur repudiandae et. Nulla ea quasi eligendi. Saepe velit autem minima."
                    Html.p "Enim dolorem dolorum omnis atque necessitatibus. Consequatur aut adipisci qui iusto illo eaque. Consequatur repudiandae et. Nulla ea quasi eligendi. Saepe velit autem minima."
                    Html.p "Enim dolorem dolorum omnis atque necessitatibus. Consequatur aut adipisci qui iusto illo eaque. Consequatur repudiandae et. Nulla ea quasi eligendi. Saepe velit autem minima."
                    Html.p "Enim dolorem dolorum omnis atque necessitatibus. Consequatur aut adipisci qui iusto illo eaque. Consequatur repudiandae et. Nulla ea quasi eligendi. Saepe velit autem minima."
                    Html.p "Enim dolorem dolorum omnis atque necessitatibus. Consequatur aut adipisci qui iusto illo eaque. Consequatur repudiandae et. Nulla ea quasi eligendi. Saepe velit autem minima."
                    Html.text "Test"

                    Html.div [
                        Daisy.button.label [
                            prop.htmlFor "my-modal-1"
                            button.primary
                            prop.text "Open Modal"
                        ]
                        Daisy.modalToggle [prop.id "my-modal-1"]
                        Daisy.modal.div [
                            prop.children [
                                Daisy.modalBox.div [
                                    Html.p "Enim dolorem dolorum omnis atque necessitatibus. Consequatur aut adipisci qui iusto illo eaque. Consequatur repudiandae et. Nulla ea quasi eligendi. Saepe velit autem minima."
                                    Daisy.modalAction [
                                        Daisy.button.label [
                                            prop.htmlFor "my-modal-1"
                                            button.primary
                                            prop.text "Accept-1"
                                        ]
                                    ]
                                ]
                            ]
                        ]
                    ]

                    Daisy.modalAction [
                        Daisy.button.label [
                            prop.htmlFor "my-modal"
                            button.primary
                            prop.text "Accept"
                        ]
                    ]
                ]
            ]
        ]
    ]

[Dzoukr]

I'm not sure whether having two modals at the same time is supported by DaisyUI. I would rather "swap" the modals (hide bottom one, show top one).

[sandeepc24]

I am showing second modal from the first one, how would I hide the parent modal?

[Dzoukr]

I would treat it in a way that: The parent component is responsible for showing modals 1 and 2. When doing something important in component 1, the parent component is acknowledged and hides modal 1, and shows the second one. More like a sequence approach instead of parent-child. Modal is by design "singleton", so I would avoid to have more than one.

[sandeepc24]

Thanks, I'll try that. The result of the above code is

[sandeepc24]

Doing this would make confirmation dialogs really look strange, I have confirmation dialogs on modal window on closing and if I hide the parent modal on showing confirmation that will not look nice.