Changes from V6:

• Modal starts a new stacking context, to prevent non-normal-flow elements from showing through the backdrop
• Scrollable content shows a shadow

    import Html.Styled exposing (..)
    import Nri.Ui.Button.V9 as Button
    import Nri.Ui.Modal.V7 as Modal

    type Msg
        = ModalMsg Modal.Msg
        | DoSomthing

    view : Modal.Model -> Html Msg
    view state =
        Modal.info
            { title = "Modal Header"
            , visibleTitle = True
            , wrapMsg = ModalMsg
            }
            [ Modal.onlyFocusableElementView
                (\{ onlyFocusableElement } ->
                    div []
                        [ Modal.viewContent [ text "Content goes here!" ]
                        , Modal.viewFooter
                            [ Button.button "Continue"
                                [ Button.primary
                                , Button.onClick DoSomthing
                                , Button.custom onlyFocusableElement
                                ]
                            , text "`onlyFocusableElement` will trap the focus on the 'Continue' button."
                            ]
                        ]
                )
            ]
            state

    subscriptions : Modal.Model -> Sub Msg
    subscriptions state =
        Modal.subscriptions state

    view init
    --> text ""  -- a closed modal

State and updates

Views

Modals

View containers

Attributes

X icon