Modals are streamlined, but flexible dialog prompts. They support a number of use cases from user notifications to completely custom content and feature a handful of helpful subcomponents, sizes, and more.

type alias Model =
    { modalVisibility : Modal.Visibility }


init : ( Model, Cmd Msg )
init =
    ( { modalVisibility = Modal.hidden }, Cmd.none )


type Msg
    = CloseModal
    | ShowModal


update : Msg -> Model -> ( Model, Cmd msg )
update msg model =
    case msg of
        CloseModal ->
            ( { model | modalVisibility = Modal.hidden }
            , Cmd.none
            )


        ShowModal ->
            ( { model | modalVisibility = Modal.shown }
            , Cmd.none
            )


view : Model -> Html msg
view model =
    Grid.container []
        [ Button.button
            [ Button.attrs [ onClick ShowModal ] ]
            [ text "Show modal" ]
        , Modal.config CloseModal
            |> Modal.small
            |> Modal.h5 [] [ text "Modal header" ]
            |> Modal.body []
                [ Grid.containerFluid []
                    [ Grid.row []
                        [ Grid.col
                            [ Col.xs6 ]
                            [ text "Col 1" ]
                        , Grid.col
                            [ Col.xs6 ]
                            [ text "Col 2" ]
                        ]
                    ]
                ]
            |> Modal.footer []
                [ Button.button
                    [ Button.outlinePrimary
                    , Button.attrs [ onClick CloseModal ]
                    ]
                    [ text "Close" ]
                ]
            |> Modal.view model.modalVisibility
        ]

NOTE: Don't try to open several modals at the same time. It probably won't end well.

Modal

State

Modal options

Header

Body

Footer

Animated Modals

When you want your modal to support an animation when displayed and closed. There is a few more things you must wire-up and keep in mind.

Example

type Msg
    = ShowModal
      -- Note the extra msg constructor needed
    | AnimateModal Modal.Visibility
    | CloseModal


update : Msg -> State -> State
update msg state =
    case msg of
        CloseModal ->
            { state | modalVisibility = Modal.hidden }


        ShowModal ->
            { state | modalVisibility = Modal.shown }


        -- You need to handle the extra animation message
        AnimateModal visibility ->
            { state | modalVisibility = visibility }


-- Animations for modal doesn't work without a subscription.
-- DON´T forget this !
subscriptions : Model -> Sub msg
subscriptions model =
    Sub.batch
        [ Modal.subscriptions model.modalVisibility AnimateModal ]


view : Model -> Html msg
view model =
    Grid.container []
        [ Button.button
            [ Button.attrs [ onClick ShowModal ] ]
            [ text "Show modal" ]
        , Modal.config CloseModal
            |> Modal.h5 [] [ text "Modal header" ]
            |> Modal.body [] [ text "Modal body" ]
            |> Modal.footer []
                [ Button.button
                    [ Button.outlinePrimary
                    , Button.attrs [ onClick <| AnimateModal Modal.hiddenAnimated ]
                    ]
                    [ text "Close" ]
                ]
            |> Modal.view model.modalVisibility
        ]