A modal

A modal showing a single element.

Material design only allows one element at a time to be viewed as a modal. To make things easier, this widget only views the first element of the list. This way you can see the list as a queue of modals.

import Element


type Msg
    = Close


Element.layout
    (singleModal
        [ { onDismiss = Just Close
          , content =
              Element.text "Click outside this window to close it."
          }
        ]
    )
    |> always "Ignore this line" --> "Ignore this line"

Technical Remark:

• To stop the screen from scrolling, set the height of the layout to the height of the screen.

Same implementation as singleModal but also displays the "queued" modals.

import Element


type Msg
    = Close


Element.layout
    (multiModal
        [ { onDismiss = Just Close
          , content =
              Element.text "Click outside this window to close it."
          }
        ]
    )
    |> always "Ignore this line" --> "Ignore this line"

map a Modal