Working Popup example

.gitignore

elm-stuff/

elm-package.json

{
    "version": "1.0.0",
    "summary": "helpful summary of your project, less than 80 characters",
    "repository": "https://github.com/user/project.git",
    "license": "BSD3",
    "source-directories": [
        "."
    ],
    "exposed-modules": [],
    "dependencies": {
        "elm-lang/core": "5.1.1 <= v < 6.0.0",
        "elm-lang/html": "2.0.0 <= v < 3.0.0"
    },
    "elm-version": "0.18.0 <= v < 0.19.0"
}

Main.elm

module Main exposing (..)

import Popup exposing (..)
import Html exposing (..)
import Html.Events exposing (..)
import Json.Decode exposing (succeed)


type alias Model =
    { popup : Popup.Model
    , count : Int
    }


type Msg
    = Click
    | PopupMsg Popup.Msg


init : ( Model, Cmd Msg )
init =
    let
        ( popup, popupCmd ) =
            Popup.init
    in
        ( { popup = popup, count = 0 }, Cmd.map PopupMsg popupCmd )


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Click ->
            ( { model | count = model.count + 1 }, Cmd.none )

        PopupMsg msg ->
            let
                ( popup, popupCmd ) =
                    Popup.update msg model.popup
            in
                ( { model | popup = popup }, Cmd.map PopupMsg popupCmd )


view : Model -> Html Msg
view model =
    let
        popupContent =
            div []
                [ span [ onCustomClick Click ] [ text ("I'm Poppy! (You clicked " ++ toString model.count ++ " times)") ]
                , Html.map PopupMsg <| button [ onClick Popup.Close ] [ text "Close" ]
                ]
    in
        div []
            [ text "I have a popup!"
            , Html.map PopupMsg <| button [ onClick Popup.Open ] [ text "Show me!" ]
            , Popup.view model.popup popupContent PopupMsg
            ]


onCustomClick : Msg -> Attribute Msg
onCustomClick msg =
    onWithOptions "click" { stopPropagation = True, preventDefault = True } (succeed msg)


main : Program Never Model Msg
main =
    Html.program { init = init, update = update, view = view, subscriptions = always Sub.none }

Popup.elm

module Popup exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Json.Decode exposing (succeed)


type alias Model =
    { open : Bool
    }


type Msg
    = Open
    | Close


init : ( Model, Cmd Msg )
init =
    ( { open = False }, Cmd.none )


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Open ->
            ( { model | open = True }, Cmd.none )

        Close ->
            ( { model | open = False }, Cmd.none )


view : Model -> Html a -> (Msg -> a) -> Html a
view model subview tagger =
    let
        overlay =
            [ ( "display"
              , if model.open then
                    "flex"
                else
                    "none"
              )
            , ( "position", "absolute" )
            , ( "left", "0px" )
            , ( "top", "0px" )
            , ( "width", "100%" )
            , ( "height", "100%" )
            , ( "align-items", "center" )
            , ( "justify-content", "center" )
            , ( "background-color", "rgba(0, 0, 0, 0.5)" )
            ]

        popup =
            [ ( "background-color", "white" )
            , ( "padding", "2em" )
            ]
    in
        div [ style overlay, onCustomClick (tagger Close) ]
            [ div [ style popup ] [ subview ] ]


onCustomClick : a -> Attribute a
onCustomClick msg =
    onWithOptions "click" { stopPropagation = True, preventDefault = True } (succeed msg)