The configuration for the dialog you display. The header, body and footer are all Maybe (Html msg) blocks. Those (Html msg) blocks can be as simple or as complex as any other view function.

Use only the ones you want and set the others to Nothing.

The closeMessage is an optional Signal.Message we will send when the user clicks the 'X' in the top right. If you don't want that X displayed, use Nothing.

Renders a modal dialog whenever you supply a Config msg.

To use this, include this view in your top-level view function, right at the top of the DOM tree, like so:

type Message
  = ...
  | ...
  | AcknowledgeDialog




view : -> Model -> Html Message
view model =
  div
    []
    [ ...
    , ...your regular view code....
    , ...
    , Dialog.view
        (if model.shouldShowDialog then
          Just { closeMessage = Just AcknowledgeDialog
               , containerClass = Just "your-container-class"
               , header = Just (text "Alert!")
               , body = Just (p [] [text "Let me tell you something important..."])
               , footer = Nothing
               }
         else
          Nothing
        )
    ]

It's then up to you to replace model.shouldShowDialog with whatever logic should cause the dialog to be displayed, and to handle an AcknowledgeDialog message with whatever logic should occur when the user closes the dialog.

See the examples/ directory for examples of how this works for apps large and small.

This function is useful when nesting components with the Elm Architecture. It lets you transform the messages produced by a subtree.

For convenience, a varient of map which assumes you're dealing with a Maybe (Config a), which is often the case.