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.
Create an initial modal config. You can enrich the config by using the header, body, footer and option related functions.
Opaque type representing the view config for a model. Use the config function to create an initial config.
The modal should be made visible.
Visibility state for the modal
Option to make a modal smaller than the default
Option to make a modal larger than the default
Option to trigger close message when the user clicks on the modal backdrop. Default True.
Create a header for a modal, typically for titles, but you can be imaginative
attributes List of attributeschildren List of child elementsconfig configuration settings to configure header forCreates a modal header with a h1 title child element
attributes List of attributeschildren List of child elementsconfig configuration settings to configure header forCreates a modal header with a h2 title child element
attributes List of attributeschildren List of child elementsconfig configuration settings to configure header forCreates a modal header with a h3 title child element
attributes List of attributeschildren List of child elementsconfig configuration settings to configure header forCreates a modal header with a h4 title child element
attributes List of attributeschildren List of child elementsconfig configuration settings to configure header forCreates a modal header with a h5 title child element
attributes List of attributeschildren List of child elementsconfig configuration settings to configure header forCreates a modal header with a h6 title child element
attributes List of attributeschildren List of child elementsconfig configuration settings to configure header forOpaque type representing a modal header
Create a body for a modal, you would typically always create a body for a modal
attributes List of attributeschildren List of child elementsconfig configuration settings to configure body forOpaque type representing a modal body
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.
Configure the modal to support fade-in/out animations. You'll need to provide a message to handle animation.
Subscription for handling animations
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
]
Create a modal for your application
showWhether to display the modal or not (ifFalsethe content is still in the dom, but hidden). You need to keep track of this state in your modelconfigView configuration