Represent the configuration of a Modal. This type can't be created directly and is Opaque. You must use Configuration constructors instead

Small size modal constructor. Modal by default is printed with a close button on header Requires initial visibility state, and the event that should be emitted when user interacts with close button

eg.

--
type Msg
    = HideYourModal


type alias Model =
    { field1 : FieldType
    , isModalVisible : Bool
    }
...
-- Somewhere in your views


yourModal : Model -> Html Msg
yourModal { isModalVisible } =
    Modal.small isModalVisible HideYourModal
        |> Modal.render

Medium modal configuration constructor. Modal by default is printed with a close button on header Requires initial visibility state, and the event that should be emitted when user interacts with close button

eg.

--
type Msg
    = HideYourModal


type alias Model =
    { field1 : FieldType
    , isModalVisible : Bool
    }
...
-- Somewhere in your views


yourModal : Model -> Html Msg
yourModal { isModalVisible } =
    Modal.medium isModalVisible HideYourModal
        |> Modal.render

Large modal configuration constructor. Modal by default is printed with a close button on header Requires initial visibility state, and the event that should be emitted when user interacts with close button

eg.

--
type Msg
    = HideYourModal


type alias Model =
    { field1 : FieldType
    , isModalVisible : Bool
    }
...
-- Somewhere in your views


yourModal : Model -> Html Msg
yourModal { isModalVisible } =
    Modal.large isModalVisible HideYourModal
        |> Modal.render

Small size modal constructor with Dark style.

Medium size modal constructor with Dark style.

Large size modal constructor with Dark style.

Renders the modal config (note that modal is not rendered until visible

Utility that hides a modal. If you need to hold modal config in your model you can avoid visibility state duplication and simply use this helper in your update to hide the modal when you need

eg.

--
type Msg
    = HideYourModal
    | ShowModal


type alias Model =
    { ...
    , myModal : Modal.Config Msg
    }


model: Model
model =
   { ...
   , myModal = Modal.small False HideYourModal
   }
...
-- Somewhere in your views


yourModal : Model -> Html Msg
yourModal { myModal } =
    myModal
        |> Modal.render


-- Somewhere in your update
case msg of
    ShowModal ->
        model
            |> showModal
            |> withoutCmds
    HideYourModal ->
        model
            |> hideModal
            |> withoutCmds
 ...


 showModal: Model -> Model
 showModal model =
    { model
        | myModal = Modal.show model.myModal
    }


 hideModal: Model -> Model
 hideModal model =
    { model
         | myModal = Modal.hide model.myModal
    }

Utility that shows a modal. If you need to hold modal config in your model you can avoid visibility state duplication and simply use this helper in your update to show the modal when you need

eg.

--
type Msg
    = HideYourModal
    | ShowModal


type alias Model =
    { ...
    , myModal : Modal.Config Msg
    }


model: Model
model =
   { ...
   , myModal = Modal.small False HideYourModal
   }
...
-- Somewhere in your views


yourModal : Model -> Html Msg
yourModal { myModal } =
    myModal
        |> Modal.render


-- Somewhere in your update
case msg of
    ShowModal ->
        model
            |> showModal
            |> withoutCmds
    HideYourModal ->
        model
            |> hideModal
            |> withoutCmds
 ...


 showModal: Model -> Model
 showModal model =
    { model
        | myModal = Modal.show model.myModal
    }


 hideModal: Model -> Model
 hideModal model =
    { model
         | myModal = Modal.hide model.myModal
    }

Utility that toggle modal visibility. If you need to hold modal config in your model you can avoid visibility state duplication and simply use this helper in your update to toggle the modal when you need

eg.

--
type Msg
    = ToggleYourModal


type alias Model =
    { ...
    , myModal : Modal.Config Msg
    }


model: Model
model =
   { ...
   , myModal = Modal.small False HideYourModal
   }
...
-- Somewhere in your views


yourModal : Model -> Html Msg
yourModal { myModal } =
    myModal
        |> Modal.render


-- Somewhere in your update
case msg of
    ToggleModal ->
        model
            |> toggleModal
            |> withoutCmds
 ...


 toggleModal: Model -> Model
 toggleModal model =
    { model
        | myModal = Modal.toggle model.myModal
    }

Modifier Adds generic attribute to modal. It can be used several times

Modifier Adds class attribute to modal.

Modifier Adds classList attribute to modal.

Modifier Adds id attribute to modal.

Modifier Adds style attribute to modal. It can be used several times

Modifier Adds title attribute to modal.

Modifier The modal closes if overlay is clicked

Modifier Adds a style attribute to overlay. It can be used several times

Modifier Adds a generic attribute to overlay. If you are planning to add a custom event listener you may take a look to InterceptedEvents and Interceptor modules to avoid undesired bubbling and onOverlayClick function in this module.

Modifier Adds class attribute to overlay

Modifier Adds classList attribute to overlay

Modifier Adds generic attribute to modal header. It can be used several times

Modifier Adds class attribute to modal header.

Modifier Adds classList attribute to modal header.

Modifier Adds a custom html content in modal header with close button

Modifier Adds a custom html content in modal header without close button

Modifier Adds a style attribute to header. It can be used several times

Modifier Prints given string in modal title section with close button

Modifier Prints given string in modal title section without close button

Modifier Adds a generic attribute to modal body. It can be used several times

Modifier Adds a class attribute to modal body.

Modifier Adds a classList attribute to modal body.

Modifier Adds a content to modal body.

Modifier Adds a style attribute to modal body. It can be used several times

Modifier Adds a generic attribute to modal footer. It can be used several times

Modifier Adds a class attribute to modal footer.

Modifier Adds classList attribute to modal footer.

Modifier Adds a content to modal footer.

Modifier Adds a style attribute to modal footer. It can be used several times