The Dialog Configuration.

styles sets inline styles for the dialog div. You may e.g. want to set a width. title sets a header title. Since MDL does the styling, you only need to provide a string. content is where you put all your Html to be displayed in the Dialog's body. actionBar sits at bottom of the Dialog. You may want to place some actions there, usually at least one close button.

Render the Dialog

Dialog.render
    { styles = [ ( "width", "40%" ) ]
    , title = "My Dialog"
    , content = [ text "This is my dialog's body." ]
    , actionBar = [ button [ onClick ToggleMyDialogVisible ] [ text "Close" ] ]
    }
    model.myDialogVisible

You take care of the open and close Msg yourself. Just include a Visible in your model for each Dialog.

type alias Model =
    { myDialogVisible : Visible
    }


update msg model =
    case msg of
        ToggleMyDialogVisible ->
            ( { model | myDialogVisible = not model.myDialogVisible }
            , Cmd.none
            )

A helper to make things more humand readable. Use it like this:

type alias Model =
    { myDialogVisible : Visible
    }

In the init function initialize it like this:

init =
    { myDialogVisible = Dialog.hidden
    }

A helper function that returns False to make things more human readable

A helper function that returns True to make things more human readable